next 服务端渲染
实际上,next 一直都是执行的服务端渲染.npm start执行的是 next 自带的服务器来运行你的应用.next 是支持自定义服务器的,同时能够支持现有的路由和模式,你可以在此基础上添加一些自己的需求.
新建/server.js
const express = require("express");
const next = require("next");
const dev = process.env.NODE_ENV !== "production"; //判断是否开发环境
const app = next({ dev }); //创建一个next的app
const handle = app.getRequestHandler(); //请求处理
app
.prepare()
.then(() => {
const server = express();
//用来进行简化路径匹配
server.get("/b/:currentBookId", (req, res) => {
const actualPage = "/book/[currentBookId]";
const queryParams = { currentBookId: req.params.currentBookId };
app.render(req, res, actualPage, queryParams);
});
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(6776, err => {
if (err) throw err;
console.log("> Ready on http://localhost:6776");
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
其中 app 有 next(opts: object)创建而来
- dev（bool）是否在开发模式下启动 Next.js-默认 false
- dir（string）项目所在的位置-默认'.'
- quiet（bool）隐藏包含服务器信息的错误消息-默认 false
- conf（object）与您要使用的对象相同 next.config.js-默认{}
同时修改 package.json 中的配置
"server:dev": "node server.js",
"server:start": "NODE_ENV=production node server.js",
解决使用路由隐藏 as 会 404 的问题
例如
<Link href={`/book/${item.id}`} as={`/b/${item.id}`}>
然后在npm run dev的情况下,我们使用 next 默认的服务器.页面在使用 as 的时候起了一个缩写路径名称,这种情况在第一次进入是正常匹配的,但是刷新就会 404,原因在于服务器目前并不清楚 b 代表的是什么路径.
而在 server.js 中就添加了关于 b 的缩写匹配
//用来进行简化路径匹配
server.get("/b/:currentBookId", (req, res) => {
const actualPage = "/book/[currentBookId]";
const queryParams = { currentBookId: req.params.currentBookId };
app.render(req, res, actualPage, queryParams);
});
此时我们npm run server:dev开启自定义服务器,打开页面进入缩写路径,我们刷新发现页面会保留.
之后
npm run dev命令可以抛弃了
多路径页面
next 默认会将 pages 下的 js 文件创建出对应的路径.我们起了路由别名,并且通过自定义路由让路由的别名生效.但是我们再次输入 book/[currentBookId],发现依旧可以匹配到同样的页面,造成一个页面拥有的 2 个及以上的路径.这可能会导致 SEO 和 UX 问题
我们通过设置 useFileSystemPublicRoutes 来禁用默认路由
// next.config.js
module.exports = {
useFileSystemPublicRoutes: false,
}
重启打开网站,book/[currentBookId]就会直接 404 了.
useFileSystemPublicRoutes 禁用来自 SSR 的文件名路由.客户端路由仍然可以访问这些路径,需要拦截 popstate来配置客户端也禁用.
动态 assetPrefix
有时候我们需要动态路由,比如根据基于请求更改 assetPrefix,这时候我们需要使用 app.setAssetPrefix
server.get("*", (req, res) => {
if (req.headers.host === "my-app.com") {
app.setAssetPrefix("http://cdn.com/myapp");
} else {
app.setAssetPrefix("");
}
return handle(req, res);
});
禁用 X-Powered-By
Next.js 将添加 x-powered-by 到请求标头中。这个是由语言解析器或者应用程序框架输出的。这个值的意义用于告知网站是用何种语言或框架编写的。
直接禁用它
// next.config.js
module.exports = {
poweredByHeader: false,
}
网友评论