原文作者：Arnaud Lewis
译者：UC 国际研发 桥川
----
为了可以在 Google 上获得一个好的排名并为你的网站提升曝光量，SEO 已经成为非常最重要的环节。如果你曾想过如何继续使用 React 开发 Web 应用，同时又没有糟糕的 SEO 和首屏加载延迟的缺点，那你应该了解一下 Next.js。
Next.js 的目标是为开发者提供一个与开发简单 React 应用相近的开发体验，同时又能获得同构应用的所有好处。它降低了学习难度并让 React 社区更容易接受。
本文旨在展示同构应用的概念以及 Next.js 是如何解决的。我们提供了一些详细的代码片段。
配置你的环境
你只需要在系统上安装 Node.js 就可以开始构建 Next.js 应用。当然，你也需要在你的项目中安装以下依赖：
Next：
Express：
next-routes:
这三个库是你开始所需的所有基础了。
Next.js 默认基于页面的路由
Next.js 提供了一个开箱即用的路由系统。它是完全基于页面的，且无需配置的路由系统。
基于页面的路由意味着一个组件基于它在项目中的路径与一个 url 关联。
当开始使用 Next.js 时，你用两个简单的动作即可构建你的第一个页面：
- 在你的源目录下创建一个叫做 pages 的目录
- 构建你的第一个 React 组件
pages/index.js
通过访问你网站的主页，你应该可以看到 Hello Next.js 展示在那。
使用基于页面的路由，每个页面都对应一个组件。这是一个常见的系统，你可以在静态网站生成器中找到它。
构建动态路由
Next.js 内置的基于页面的路由是很容易使用的，但大多数时候你需要动态 URL。想象一下，你需要一个在路由级别管理的动态参数，并将其作为属性注入组件中。这就是需要用到动态路由的地方了。
Next.js 有一个内置的服务器实现，需要替换它来实现动态路由。
你很快就会看到，你将设置一个简单的 Express 服务器。Express 是 Node.js 社区的一个知名的框架，因为它的易用性和强大的 url 匹配系统。
配置你的路由
在此示例中，你将会发现 next-rotues ，一个用于处理服务器端和客户端路由的简单工具。
因为我们使用 Express 服务器实现，你的路由将会有与模式匹配完全相同的语法，你可以在 Express 文档找到详细信息。
routes.js
在上面的示例中，你有 product 和 bl-ogpost 两个动态路由。在这两个路由里，我们都传递了一个 uid 参数到对应的组件。
设置你的服务器
路由准备完毕后，你只需设置服务器并为其提供路由配置即可。
server.js
更新你的构建环境以包含服务器
当实现了 Express 服务器后，就需要考虑它并更新构建脚本了。
package.json
在应用中导航
这是 next-routes 非常便利的地方。
通过输出路由，你就有了一个功能完备的路由器，这样你在应用中导航就无需担心你是在服务器端还是客户端。
有两种方式可以在组件之间导航：
1、声明式的使用 Link 组件
pages/blogpost.js:
在这里你可以观察到两件事。
首先，你有一个来自 props 的名叫 qu-ery 的变量，它包含了动态参数 uid。它来自你的路由系统。
其次，你有一个来自路由配置的 Link 组件。它允许你在组件之间导航，而无需执行整页重新加载。
2、命令式的使用 Router 对象
在这个例子中，你从路由配置中获取 Router 对象。它允许你以编程的方式管理路由，而不是在模板中执行。
异步的获取外部数据
从外部 API 查询你的内容
设置好应用后，你需要为其提供一些实际的内容，最有可能是来自外部的资源。在同构应用中这样做很痛苦，但 Next.js 提供了一种简单的方法来处理它。
除了众所周知的 React 组件生命周期外，每个页面组件都可以实现一个异步函数 getInitialProps，它将获取的数据以 props 方式提供给组件。
在上面简单示例中，我们异步的从一个外部源获取数据并将其填充到我们的组件中。
通过预获取内容加快速度
Next.js 还有一个嵌入机制来预获取所有相关页面，以帮助加快你的网站和提供一个真正快速的用户体验。
要预获取链接，你只需向链接添加一个 prefetch 属性即可。
基本上，对于每个有 prefetch 标记的 Link 组件，Next.js 会在后台通过 Se-rviceWorker 预获取组件的 JSON 表示。如果你四处浏览，则可能在你关注链接或触发路由转换时，该组件已被获取。此外，因为数据是通过专有方法 getInitialProps 获取的，你可以积极的预获取，而不会触发不必要的服务器加载或者数据获取。
近距离观察 Next.js 对同构应用的实现
同构应用是一种以纯 JavaScript 在服务器端 Node.js 上构建的应用。
该架构因 React 变得相当出名，但目前可用于许多客户端框架或库，如 Angular，Vue.js 等。
基本上，它允许你在服务器端和客户端之间共享组件，以便你可以在两端进行渲染。
组件在首次加载时是如何渲染的
首次加载始终由服务器处理，它会把组件渲染成静态标记，然后将其发送给客户端来渲染 HTML。
完成渲染后，浏览器会加载 JavaScript 然后将所有的浏览器处理器应用到组件上，如 'onClick'，'onChange'等。
这样做可以避免你等待客户端加载 Jav-aScript 然后再渲染组件。
如何为你的组件在两端都提供数据
大多数情况下，你的组件将依赖外部数据进行渲染。外部数据通常也意味着异步数据。
为客户端生成 HTML
在服务器端，Next.js 访问请求页面所需要的查询，以便它可以计算此查询并在将数据发送给客户端之前将其提供给组件。
在查询完成后，Next.js 将简单地向浏览器发送静态标记，并重新执行 React 以绑定所有浏览器事件。
从客户端恢复数据
为了避免组件进行两次相同的查询，Next.js 将会把数据和 HTML 一起序列化然后提供给组件。 Next.js 暴露了一个静态异步函数 getInitialProps 给每一个页面组件，然后把获取的数据序列化到 script 标签里。在客户端，它会从 window 读取数据然后作为 props 提供给组件。这个机制叫做再水化。
Next.js 的目的是什么？
在 Prismic，我们认为 Next.js 是一个便利的库，适合那些习惯于 React 但在 SEO 和复杂架构方面遇到困难的人。它很容易上手，但也非常强大，因为它提供了一个舒适的定制空间。 使用 Next.js 整合营销内容和SEO页面变得非常高效。
你可以找到一个功能齐全的使用 Prism-ic 和 Next.js 构建的咖啡店例子，以及 Github 上的所有资源。
以上所有例子都受此示例的启发。
英文原文：
