IT技术 - 查看源不显示动态内容 - 吾爱随笔录

查看源不显示动态内容

IT技术 javascript reactjs next.js server-side-rendering

2021-05-11 14:49:42

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

我做出了一个Promise，并且在检索内容和加载这些内容之后出现延迟，如果我在 chrome 中查看源代码 (ctrl + u)，我将无法在源代码中加载这些动态内容。

所以它可以在链接中重现，

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

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

在这里，您可以清楚地看到没有包含文本的元素，My name is Jared而所有其他文本都应该在那里，但事实并非如此。

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

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

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

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

非常感谢提前..

3个回答

您明确告诉 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在客户端定期重新验证数据。