查看源不显示动态内容 [英] View source not displaying dynamic content

问题描述

我正在制作一个非常简单的下一个js应用程序，除了视图源之外，其他所有功能都可以正常工作.

I am making very simple next js application, where everything is working fine but except the view source.

我承诺，检索内容会有延迟，并且在加载这些内容之后，如果我在chrome中查看源(ctrl + u)，则无法在源中加载这些动态内容.

I am making a promise and there is a delay in retrieving content and after when those content loaded and if I view source (ctrl + u) in chrome, I couldn't get those dynamic content loaded in the source.

因此它可以在链接中复制，

So it is reproduceable in the link,

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

Step 1) Just click on the codesandbox link: https://3re10.sse.codesandbox.io

第2步)之后，选择查看源(ctrl + u)，并显示类似的页面，

Step 2) After that choose view source (ctrl + u), and it gives page like,

在这里您可以清楚地看到，没有没有元素，其中包含文本My name is Jared，并且所有其他文本都打算包含在其中，但实际上不是.

Here you could clearly see that there is no element with text My name is Jared and all other text which is intended to be there but it is not.

页面加载时，页面源中仅提供Loading...文本.

Only Loading... text is available in page source which comes on page load.

此处提供了整个应用程序的工作代码: https://codesandbox.io/s/nextjs-typescript-template-u8evx

The entire application working code is available here: https://codesandbox.io/s/nextjs-typescript-template-u8evx

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

Please help me how could I reflect all the dynamic content in view source in Next Js application.

我可以理解，这是由于 async 的行为引起的.但是，实际上我无法理解克服此问题并在加载后显示动态内容的方法.坚持了很长时间..

I could understand that this is due to behaviour of async .. But really I couldn't understand the way to overcome this and display the dynamic content once loaded.. Please help me, I am stuck with this for very long..

非常感谢.

推荐答案

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

You're explicitly telling React to fetch a user on a client-side.

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

如果您需要在服务器上预呈现用户信息，则可以使用以下功能之一进行操作:

If you need to prerender a user info on the server you can do it with one of the following functions:

• getStaticProps(静态生成):在构建时间获取数据
• getServerSideProps(服务器端呈现):根据每个请求获取数据.

• getStaticProps (Static Generation): Fetch data at build time
• getServerSideProps (Server-side Rendering): Fetch data on each request.

在获取用户信息时，我认为应该在每次请求时都请求它，因此请使用getServerSideProps.

As you fetching a user info, I assume that it should be requested on each request, so use 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，它将定期重新验证数据.

This way you would fetch a user info on the server and give it to React with first render. Also, you would have useSWR on a client side that will periodically revalidate data.

建议阅读: 数据获取

这篇关于查看源不显示动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！