使用Next.js探索React服务端渲染
使用Next.js探索React服务端渲染
引言
使用React构建现代JS应用很棒，但是涉及客户端渲染内容时你会碰到很多问题。
首先页面需要耗费长时间加载用户才能看到。因为内容加载前，所有的JS都必须加载，
应用自身也需要判断页面展示内容。
其次，如果你的网站是对外服务的，你会面临SEO问题。搜索引擎变得更擅长执行和索引JS应用。
但如果我们直接向搜索引擎发送内而无需做判断会更好。
解决上面两个问题的方法是服务端渲染，又称作静态预渲染。
Next.js框架能够帮助最简化实现服务端渲染，同时它声称是React应用的零配置、单命令工具链。
Next.js提供通用结构，允许开发者轻易构建前端React应用，同时默默处理服务端渲染。
主要功能
-
热代码更新: 检测磁盘文件更新即更新整个页面
-
自动路由: 映射文件系统路径至任意URL地址，无需任何配置
-
单文件组件: 使用自身集成的styled-jsx，可以给组件直接添加样式
-
服务端渲染: 发送html之前，你可以选择性在服务端渲染React组件
-
生态系统兼容: next.js与js、node、react生态系统协作良好
-
自动代码分割: 页面只会加载需要的js文件资源
-
预读取:
Link链接组件，支持prefetch属性用于后台自动预读取页面资源，包括代码分割丢失的代码 -
动态组件: 支持动态导入JS文件和React组件
-
静态输出: 使用
next export命令，可以输出APP为静态站点
安装
npm命令
npm install --save next react react-dom
yarn命令
yarn add next react react-dom
上手
创建package.json文件
{
"scripts": {
"dev": "next"
}
}
创建空page目录，执行npm run dev命令，next.js会在localhost:3000启动本地服务。
默认首页指向404页面，next.js也可以处理500状态。
创建页面
在page目录中创建index.js, 写一个简单React纯函数组件
export default () => (
<div>
<p>Hello World!</p>
</div>
)
如果访问服务端，组件会自动加载。
next.js使用基于文件系统结构的声明式页面结构，文件系统路径就是页面API。
打开页面源码，查看View->Developer->View Source, 页面源码显示的是组件生成由服务端渲染的html元素。
next.js团队致力于打造和PHP项目类似的开发者体验，创建PHP文件后，内容会实时显示在页面中。
不过，内部实现会截然不同，但显然易用性是一样的。
添加新页面
添加第二个页面`pages/contact.js
export default () => (
<div>
<p>
<a href="my@email.com">Contact us!</a>
</p>
</div>
)
热刷新
无须手动重启npm进程，next.js会在后台自动完成。
客户端渲染
服务端渲染在首页面加载会十分方便，但当导航至网站内部页面时，客户端渲染是加速页面加载的关键，能提升用户体验。
Next.js提供Link组件用来创建链接，可以上述示例中创建链接：
import Link from 'next/link'
export default () => (
<div>
<p>Hello World!</p>
<Link href="/contact">
<a>Contact me!</a>
</Link>
</div>
)
当回到浏览器，测试链接时，Contact页面会立刻加载，没有页面再次刷新。
这正是客户端导航发挥作用的结果， 完全支持HistoryAPI， 这意味着回退按钮也不会挂。
如果你新开页面打开链接，Contact页面新开tab页，进行服务端渲染。
动态页面
博客是next.js非常好的案例。
所有开发者都知道运行方式，特别适合用来讲解动态页面处理。
动态页面没有固定内容，会基于某些参数渲染部分数据。
import Link from 'next/link'
const Post = (props) => (
<li>
<Link href={`/post?title=${props.title}`}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post title="Yet another post" />
<Post title="Second post" />
<Post title="Hello, world!" />
</li>
</ul>
</div>
)
组件会创建一系列的文章链接，文章标题附加查询参数。
可以在page目录中创建post.js文件:
export default (props) => (
<h1>{props.url.query.title}</h1>
)
你可以用纯URL链接，不带任何参数，next.js链接组件可以接收as属性，用来传递slug参数
import Link from 'next/link'
const Post = (props) => (
<li>
<Link as={`/${props.slug}`} href={`/post?title=${props.title}`}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post slug="yet-another-post" title="Yet another post" />
<Post slug="second-post" title="Second post" />
<Post slug="hello-world" title="Hello, world!" />
</li>
</ul>
</div>
)
使用样式
next.js默认支持styled-jsx, 也是由该团队出品的样式方案，你也可以使用其他库，比如, Styled Components。
输出静态站点
next.js应用可以轻易导出为静态站点，可以后续部署在静态资源服务上，比如: Netlify or Firebase Hosting, 这些服务都不需要额外创建Node环境。
静态站点生成需要声明所有组成网站的URL地址，这在next.js中可以直接配置。
部署
next.js应用很容易创建上线准备版本，无需source map映射，也不需要额外开发工具进行最终构建。
可以直接修改package.json文件:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
现状
Next.js背后的公司也针对Nodejs应用提供托管服务Now。
- 多分区支持
你可以创建多个Next.js实例来监听不同的URL地址。
但外网用户会感觉只有一个服务器，参考多分区支持
- 多插件支持
译者注
-
原文有删减，因译者水平有限，如有错误，欢迎留言指正交流
