下一页 即使没有 getXProps 也能渲染 JS服务器端?

Question

此代码位于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>
);

Answer 1

生产模式

提供的页面没有getInitialProps或getServerSideProps。它是静态优化的(在构建时预呈现(。

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

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

开发模式

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

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

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