详解使用Next.js构建服务端渲染应用(4)

日期：2020-05-11 栏目：程序人生浏览：次

使用query string可以实现页面间的传值，但是会导致页面的url不太简洁美观，尤其当要传输的值多了之后。所以next.js提供了Route Masking这个特性用于路由的美化。

路由伪装（Route Masking）

这项特性的官方名字叫Route Masking，没有找到官方的中文名，所以就根据字面意思暂且翻译成路由伪装。所谓的路由伪装即让浏览器地址栏显示的url和页面实际访问的url不一样。实现路由伪装的方法也很简单，通过Link组件的as属性告诉浏览器href对应显示为什么url就可以了，index.js代码修改如下：

import Link from 'next/link';
import Layout from '../components/Layout';

const PostLink = (props) => (
 <li>
  <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
   <a>{props.title}</a>
  </Link>
 </li>
);

export default () => (
 <Layout>
  <h1>My Blog</h1>
  <ul>
   <PostLink id="hello-nextjs" title="Hello next.js" />
   <PostLink id="learn-nextjs" title="next.js is awesome" />
   <PostLink id="deploy-nextjs" title="Deploy apps with Zeit" />
  </ul>
 </Layout>
);

运行结果：

浏览器的url已经被如期修改了，这样看起来舒服多了。而且路由伪装对history也很友好，点击返回再前进还是能够正常打开详情页面。但是如果你刷新详情页，确报404的错误，如图：

这是因为刷新页面会直接向服务器请求这个url，而服务端并没有该url对应的页面，所以报错。为了解决这个问题，需要用到next.js提供的自定义服务接口（custom server API）。

自定义服务接口

自定义服务接口前我们需要创建服务器，安装Express:

npm install --save express

在项目根目录下创建server.js 文件，内容如下：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
 .then(() => {
  const server = express();
  server.get('*', (req, res) => {
   return handle(req, res);
  });
  server.listen(3000, (err) => {
   if (err) throw err;
   console.log('> Ready on http://localhost:3000');
  });
 })
 .catch((ex) => {
  console.error(ex.stack);
  process.exit(1);
 });

然后将package.json里面的dev script改为：

"scripts": {
 "dev": "node server.js"
}

转载注明出处：http://www.heiqu.com/332.html

详解使用Next.js构建服务端渲染应用(4)

相关推荐