NextJS 服务器端即使没有 getXProps 也能渲染？答案

【问题标题】：NextJS server side renders even without getXProps?NextJS 服务器端即使没有 getXProps 也能渲染？
【发布时间】：2020-09-28 17:33:29
【问题描述】：

此代码位于 NextJS 的页面文件中。虽然我没有使用getStaticProps 或getServerSideProps，但它仍然执行服务器端渲染。

这是设计使然吗？文档暗示这些 get 函数是必需的：https://nextjs.org/docs/basic-features/data-fetching

import React from "react";
import Head from "next/head";
import Link from "next/link";
import { ApolloProvider } from "@apollo/react-hooks";
import ApolloClient from "apollo-boost";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";

const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
});

const EXCHANGE_RATES = gql`
  {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

const Home: React.FC = () => {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) {
    return (
      <div>
        <p>Loading</p>
      </div>
    );
  }

  if (error) {
    return (
      <div>
        <p>Error</p>
      </div>
    );
  }

  return (
    <div>
      <ul>
        {data.rates.map((item) => (
          <li key={item.currency}>
            {item.currency} - {item.rate}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default () => (
  <ApolloProvider client={client}>
    <Home />
  </ApolloProvider>
);

【问题讨论】：

您在运行next dev 或next build && next start 时看到这个了吗？
你怎么知道它正在执行服务器端渲染？它看起来不像在执行任何服务器端渲染。在您的 apollo 查询完成之前，您应该会看到加载段落。有时它非常快并且会缓存它。
@SamuelG 下一个开发者
@SirCodesAlot 当我禁用 JavaScript 时，我可以看到内容仍在呈现为 HTML。
@Evanss 使用next build && next start 运行它，在开发模式下运行时有一些注意事项，每个请求都会调用像getStaticProps 这样的调用。我知道你没有使用它，但值得快速测试一下。

标签： next.js

【解决方案1】：

生产模式

提供的页面没有getInitialProps 或getServerSideProps。它是静态优化的（在构建时预渲染）。

因此，当您在浏览器中请求此页面时，您将在响应中看到预渲染的 HTML 内容。禁用 JavaScript 不会影响它。

如果您使用客户端 next/link 或路由器导航到该页面，则该页面将在客户端呈现，而无需向服务器发出请求。

开发模式

在开发模式下，此页面将同时呈现 - 服务器端呈现和客户端呈现。

如果您通过在浏览器中输入地址来请求页面，它将在服务器端预呈现。

如果您使用客户端 next/link 或路由器导航到该页面，则该页面将在客户端呈现，而不向服务器发出请求（您只会看到 Webpack 热模块替换请求）。

【讨论】：