Next.js 中的动态路由是在服务器端还是客户端呈现？

Question

Next.js 中的动态路由是在服务器端还是客户端呈现？

我正在从事一个需要服务器端渲染以实现 SEO 目的的项目，我正在使用 Next.js 和 React，并且我正在使用Next.js 动态路由。

我创建了一个简单的页面来检查它是否正常工作：

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)

Run Code Online (Sandbox Code Playgroud)

我将代码放入/pages/product/[name].js，运行开发服务器并访问localhost:3000/product/cheese。

加载页面后，我检查了浏览器中的页面源，以检查它是否在服务器端呈现，并且代码中没有任何内容包含单词cheese。

我做错了吗？它是在客户端渲染的吗？

Answer 1

lak*_*ill 3

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)
  };
};

Run Code Online (Sandbox Code Playgroud)

正如您很快就会看到的，您将需要使用 getInitialProps 来使其在服务器端呈现。然后该页面将在构建期间创建，并将在查看源代码中包含所有适用的信息。也会有SEO。

当你运行 npm build 时，它会显示哪个是静态生成的，什么是 ssr。但您需要使用 getInitialProps 否则它将在客户端生成。

归档时间：	6 年，1 月前
查看次数：	3605 次
最近记录：	4 年，9 月前