查看源代码不显示动态内容

Question

我正在制作非常简单的下一个 js 应用程序，其中一切正常，但视图源除外。

我做出承诺，检索内容时有延迟，加载这些内容后，如果我在 chrome 中查看源代码 (ctrl + u)，我无法加载这些动态内容在来源中。

因此它可以在 link,

中重现

步骤 1) 只需点击代码框 link: https://3re10.sse.codesandbox.io

步骤 2) 然后选择查看源代码 (ctrl + u)，它会显示如下页面，

在这里你可以清楚地看到有 no 元素和文本 My name is Jared 以及所有其他本应存在但实际上没有的文本。

在页面加载时出现的页面源中只有 Loading... 文本可用。

完整的应用程序工作代码可在此处获得：https://codesandbox.io/s/nextjs-typescript-template-u8evx

请帮助我如何在 Next Js 应用程序中反映视图源中的所有动态内容。

我可以理解这是由于 async 的行为造成的。但是我真的无法理解克服这个问题并在加载后显示动态内容的方法。请帮帮我，我坚持了很长时间..

提前致谢..

Answer 1

如果你使用 nextjs，你必须运行 yarn build 和 yarn export 然后你有目录 'out' 和你导出的静态内容。

因为现在你的例子是CSR（客户端渲染）

Answer 2

您明确告诉 React 在客户端获取用户。

function Profile() {
  const { data, revalidate } = useSWR("/api/user", fetch);
}

如果您需要在服务器上预呈现用户信息，您可以使用以下功能之一：

getStaticProps（静态生成）：在构建时间
getServerSideProps（服务器端渲染）：在每个请求.

当你获取用户信息时，我假设每次请求都应该请求它，所以使用 getServerSideProps.

const URL = 'api/user/'

export default function Profile({ initialData }) {
  const { data } = useSWR(URL, fetcher, { initialData })

  return (
    // render 
  )
}

export async function getServerSideProps() {
  const data = await fetcher(URL)
  return { props: { initialData: data } }
}

通过这种方式，您可以在服务器上获取用户信息，并在第一次渲染时将其提供给 React。此外，您将在客户端 useSWR 定期重新验证数据。

推荐阅读： Data fetching

Answer 3

其他答案已经很清楚地告诉你你的动态内容没有出现在源代码中的原因。

首先，渲染有两种：服务器端和客户端。

服务器端/SSR 是您的服务器呈现您的应用程序然后将其发送到客户端（浏览器） ).
Client side / CSR是当你的app到达浏览器时，它会再次渲染（但是这个如果你已经激活了 SSR，时间只会渲染必要的东西，NextJS 默认有。

如果你想让你的动态内容出现在源代码中，你应该像 @Nikolai Kiselev 提到的那样在 服务器端 调用你的 api . NextJS 提供函数 getServerSideProps()（用于组件级别），如果开发人员想要在 服务器端获取信息，则可以使用该函数.

如果您将 profile() 函数作为页面，您还可以使用 getInitialProps() 函数从服务器端获取你的 api。

请查看 NextJS 文档，他们已经提供了您需要的示例。

查看源代码不显示动态内容

View source not displaying dynamic content

javascript

reactjs

server-side-rendering

next.js