Next.js 中的动态路由是在服务器端还是客户端呈现?
Posted
技术标签:
【中文标题】Next.js 中的动态路由是在服务器端还是客户端呈现?【英文标题】:Are dynamic routes in Next.js rendered server-side or client-side? 【发布时间】:2020-02-05 08:15:36 【问题描述】:我正在从事一个需要服务器端渲染以实现 SEO 目的的项目,我正在使用 Next.js 和 React,我正在使用 Next.js dynamic routing。
我创建了一个简单的页面来检查它是否正常工作:
import Head from 'next/head'
import React, Fragment from 'react'
import withRouter from 'next/router'
class Product extends React.Component
render()
return (
<Fragment>
<Head />
<h1>this.props.router.query.name</h1>
</Fragment>
)
export default withRouter(Product)
我将代码放在/pages/product/[name].js
,运行开发服务器并访问localhost:3000/product/cheese
。
页面加载后,我在浏览器中检查了页面源以检查它是否在服务器端呈现,代码中没有任何内容包含单词cheese
。
我做错了吗?它是在客户端呈现的吗?
【问题讨论】:
【参考方案1】:import Layout from '../components/MyLayout';
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
const Index = props => (
<Layout>
<h1>Batman TV Shows</h1>
<ul>
props.shows.map(show => (
<li key=show.id>
<Link href="/p/[id]" as=`/p/$show.id`>
<a>show.name</a>
</Link>
</li>
))
</ul>
</Layout>
);
Index.getInitialProps = async function()
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
const data = await res.json();
console.log(`Show data fetched. Count: $data.length`);
return
shows: data.map(entry => entry.show)
;
;
您很快就会看到,您需要使用 getInitialProps 才能将其呈现在服务器端。然后这个页面将在构建期间创建,并将在视图源中包含所有适用的信息。也会有 SEO。
当你运行 npm build 时,它会告诉你哪个是静态生成的,什么是 s-s-r。但是您需要使用 getInitialProps 否则它将在客户端生成。
【讨论】:
嘿,谢谢 :) ,我想我必须先完成教程,然后再编写一些代码。我的坏... 一切都好,它仍然可能有点令人困惑。只要知道 getInitialProps = s-s-r。否则会在客户端生成(html仍然是静态生成的,任何动态内容都会在客户端渲染)以上是关于Next.js 中的动态路由是在服务器端还是客户端呈现?的主要内容,如果未能解决你的问题,请参考以下文章
Next.js:如何将仅外部客户端的 React 组件动态导入到开发的服务器端渲染应用程序中?