React服务端渲染-next.js
React服务端渲染-next.js
前端项目大方向上可以分为两种模式：前台渲染和服务端渲染。
前台渲染-SPA应用是一个主要阵营，如果说有什么缺点，那就是SEO不好。因为默认的HTML文档只包含一个根节点，实质内容由JS渲染。并且，首屏渲染时间受JS大小和网络延迟的影响较大，因此，某些强SEO的项目，或者首屏渲染要求较高的项目，会采用服务端渲染SSR。
Next.js 是一个轻量级的 React 服务端渲染应用框架。
熟悉React框架的同学，如果有服务端渲染的需求，选择Next.js是最佳的决定。
默认情况下由服务器呈现
自动代码拆分可加快页面加载速度
客户端路由（基于页面）
基于 Webpack 的开发环境,支持热模块替换（HMR）
官方文档
中文官网-带有测试题
初始化项目
方式1：手动撸一个
mkdir next-demo //创建项目
cd next-demo //进入项目
npm init -y // 快速创建package.json而不用进行一些选择
npm install --save react react-dom next // 安装依赖
mkdir pages //创建pages,一定要做，否则后期运行会报错
然后打开 next-demo 目录下的 package.json 文件并用以下内容替换 scripts 配置段：
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
运行以下命令启动开发（dev）服务器：
npm run dev // 默认端口为3000
npm run dev -p 6688 // 可以用你喜欢的端口
服务器启动成功，但是打开localhost:3000，会报404错误。
那是因为pages目录下无文件夹，因而，无可用页面展示。
利用脚手架：create-next-app
npm init next-app
# or
yarn create next-app
如果想用官网模板，可以在 https://github.com/zeit/next.js/tree/canary/examples 里面选个中意的，比如hello-world，然后运行如下脚本：
npm init next-app --example hello-world hello-world-app
# or
yarn create next-app --example hello-world hello-world-app
下面，我们来看看Next有哪些与众不同的地方。
Next.js特点
特点1：文件即路由
在pages目录下，如果有a.js，b.js，c.js三个文件，那么，会生成三个路由：
http://localhost:3000/a
http://localhost:3000/b
http://localhost:3000/c
如果有动态路由的需求，比如http://localhost:3000/list/:id，那么，可以有两种方式：
方式一：利用文件目录
需要在/list目录下添加一个动态目录即可，如下图:
image
方式二：自定义server.js
修改启动脚本使用server.js：
"scripts": {
"dev": "node server.js"
},
自定义server.js：
下面这个例子使 /a 路由解析为./pages/b，以及/b 路由解析为./pages/a
// This file doesn't go through babel or webpack transformation.
// Make sure the syntax and sources this file requires are compatible with the current node version you are running
// See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babel
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
app.render(req, res, '/b', query)
} else if (pathname === '/b') {
app.render(req, res, '/a', query)
} else {
handle(req, res, parsedUrl)
}
}).listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
特点2：getInitialProps中初始化数据
不同于前端渲染（componentDidMount），Next.js有特定的钩子函数初始化数据，如下：
import React, { Component } from 'react'
import Comp from '@components/pages/index'
import { AppModal, CommonModel } from '@models/combine'
interface IProps {
router: any
}
class Index extends Component {
static async getInitialProps(ctx) {
const { req } = ctx
try {
await AppModal.effects.getAppList(req)
} catch (e) {
CommonModel.actions.setError(e, req)
}
}
public render() {
return
)
}
}
_document.js 用于初始化服务端时添加文档标记元素，比如自定义meta标签。
import Document, {
Head,
Main,
NextScript,
} from 'next/document'
import * as React from 'react'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
props
render() {
return (
发表评论 (审核通过后显示评论)：