返回 登录
0

Next 3.0前瞻:静态导出和动态导入

原文链接:Next 3.0 Preview: Static Exports and Dynamic Imports
作者:Arunoda Susiripala
译者:周余飞,数观科技前端搬运工,工作之余喜欢研究Canvas和WebGL,痴迷数据可视化,TypeScript重度使用者。博客地址:http://supperjet.github.io

Next.js是一种基于服务端渲染React应用的通用JavaScript框架,已经在Github上开源。目前,最新版本是Beta版的Next.js 3.0。对于还不了解Next.js为何物的同学,可以前去官网体验一下Next.js的新玩法。本文主要介绍即将到来的Next.js 3.0版本中的两个新特性:next-export和动态组件(Dynamic Components)。

Next.js提供了一系列的新特性,它可以使我们编写的React应用在服务端完成渲染(server-rendering),其代码自动拆分功能(Automatic Code Splitting)可以使你的页面无需加载不相关的代码,并且可以在组件内编写CSS,你所要做的只是在相应的位置加上{…},就像下面这样。

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}</style>
  </div>

更多关于Next.js的使用可以到这里查看。

简单入门

Next.js上手非常简单,就如官网中所介绍的那样。在文件的根目录下创建pages/my-route.js,在my-route.js中加入以下代码。

export default () => (
  <p>Welcome to my React App!</p>
)

然后配置package.json。

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

执行

npm install next@beta react react-dom --save

然后运行

npm run dev

访问http://localhost:3000/my-route。Welcome to my React App!就这么轻松的跃然屏上。That’s it! 就是这么简单。想要了解更多,请阅读官方提供的这两篇文章《5-minute README》或《2.0 announcement blogpost》。

特性一:Next-Export

Next.js提供了next、next build和next start这三个简单的指令来完成项目的开发,编译和服务。而今天我们要介绍的是在beta版的3.0中引入的的一个新指令——next export。它可以无缝地构建你的Next.js应用程序作为一个独立的静态网站,这意味着您可以在没有服务端的情况下部署它!So Cool!

并且导出的应用程序几乎支持Next.js的所有功能,包括动态URL(dynamic URLs),prefetching,预加载(preloading)和动态导入(Dynamic Imports)等。
我们来看一个例子。

(1)使用方法

首先,使用Next.js构建一个简单的应用程序。然后,创建一个自定义的Next.js配置文件next.config.js。

// next.config.js
exports.exportPathMap = () => ({
  "/": { page: "/" },
  "/about": { page: "/about" },
  "/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
  "/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
  "/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } }
})

这段代码是页面与路由之间的简单映射,可选参数query传递给方法getInitialProps。 然后,执行:

$ next build
$ next export

当然,在执行上面的命令前,需要修改一下package.json配置文件。

{
  "scripts": {
    "build": "next build && next export"
  }
}

然后,立即运行。

$ npm run build

这时你会发现文件目录中多了一个out文件夹,out内就是你应用程序的静态版本。当然,这些都是可以自己设定的(更多参数配置使用next export -h命令查看)。

最后,cd到out目录下,执行下面的命令,就可以立即免费的将你的应用部署到now上。

$ now

(2)一些限制

使用next-export,我们构建了一个HTML版本的应用程序。在构建的过程中会自动执行getInitialProps方法并存储初始化过程中获取的数据。

getInitialProps接受一个context object(始终认为叫上下文对象不准确)作为参数,并包含以下属性:

  • pathname - path section of URL
  • query - query string section of URL parsed as an object
  • asPath - the actual url path
  • req - HTTP request object (server only)
  • res - HTTP response object (server only)
  • jsonPageRes - Fetch Response object (client only)
  • err - Error object if any error is encountered during the rendering

这就意味着类似req和res这样的只能在服务端运行的参数不能使用了,而pathname、query、asPath则完全不受影响。

基本上,当我们预先构建HTML文件时,你无法在服务端做内容的动态渲染。 如果需要,你可以使用next start运行你的应用。

动态导入

Next.js 3.0中模块的动态导入特性基于TC39草案对动态导入的支持。这意味着,你可以像使用Promise一样,使用import()来动态引入模块。模块的动态导入需要使用到高阶组件next/dynamic,其使用方法如下。

import dynamic from 'next/dynamic'

const DynamicComponent1 = dynamic(import('../components/hello1'))
const DynamicComponent2 = dynamic(import('../components/hello2'))

export default () => (
  <div>
    <Header />
    <DynamicComponent />
    <p>HOME PAGE is here!</p>
  </div>
)

在这种情况下,DynamicComponent1或DynamicComponent2并不会包含在该页面主程序中,相反它们将在客户端进行懒加载。只有真正渲染DynamicComponent1或DynamicComponent2时,相关的代码程序才会包含进来,并与其它的程序并行加载。

正如 James Kyle 说的那样,动态加载的组件可以为你的应用提供更加细致的代码分割能力。比如,在一个具有不同消息类型的聊天线程中。如果您只是依靠静态导入声明进行代码拆分,那么最终会在客户端加载许多不必的消息类型!

服务端渲染

对于组件的动态导入,Next.js同样支持其在服务器端进行渲染。比如,在上面的例子中,我们可以在服务端加载DynamicComponent1,并对其进行同步渲染。Next.js这一独特的特性,使得动态导入功能变得异常强大。

具体来说,动态导入(dynamic imports)可以避免在客户端显示空白页面,或是程序加载过程中发生的闪烁现象,同样也能解决程序加载一直处于loading的状态。

Get it now

Next.js 3.0 完全向后兼容,你可以用它做一些实验性质的尝试或是在预生产中使用。正式版的API能会有些许变化,但不会是特别大的改变。所以,放心使用吧!

  • 执行npm install next@beta。
  • 查看最新的文档
  • 看看这个例子
  • 加入ZEIT社区的 #next提出问题或联系我们!

图片描述

诚邀多位国内外知名企业前端技术专家,共话当前主流、热门前端技术,分享企业优秀前端项目研发实践,CSDN携手w3ctech &&前端圈发起人周裕波全力打造的“前端开发创新实践”线上峰会即将召开。
如果您对该峰会感兴趣,请扫描以下二维码,加入“前端开发创新实践”线上峰会交流群。
图片描述

评论