javascript getStaticProps在页面上生成静态JSON数据，这对SEO友好吗？

brgchamk 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(96)

Next.js getStaticProps在构建时将数据传递到页面，在页面上生成静态JSON数据。
React页面负责将数据组合成组件。因此SEO不会直接看到HTML数据的实际列表，对吗？这对SEO友好吗？
例如，你的页面有：

/* static data list given by static page */
const data = [{..},{..}...];
...
<ul>
  data.map(item => <li>{item.text}</li>);
</ul>

这个组件在客户端进行后期渲染，SEO不会看到ul-li s的列表。那么，getStaticProps（）是如何让SEO更快乐的呢？或者我误解了它？它并没有让SEO更快乐。

JavaScript

来源：https://stackoverflow.com/questions/75852239/getstaticprops-generates-static-json-data-on-page-how-is-that-seo-friendly

1条答案

按热度按时间

sczxawaw1#

假设我们在pages/index.js中有下面的代码。这是一个简单的Next.js页面。如果你运行yarn build并打开.next/server/pages/index.html，你会看到流动的输出。
验证码：

// pages/index.js

export default function Home({ posts }) {
  console.log(posts);
  return (
    <>
      {posts.map((p) => (
        <div key={p.id}>
          <h1>{p.title}</h1>
          <p>{p.body}</p>
        </div>
      ))}
    </>
  );
}

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  return {
    props: {
      posts: data.slice(0, 2),
    },
  };
}

输出：

<body>
  <div id="__next">
    <div>
      <h1>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</h1>
      <p>
        quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae
        ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto
      </p>
    </div>
    <div>
      <h1>qui est esse</h1>
      <p>
        est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque
        fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non
        debitis possimus qui neque nisi nulla
      </p>
    </div>
  </div>
  <script id="__NEXT_DATA__" type="application/json">
    {
      "props": {
        "pageProps": {
          "posts": [
            {
              "userId": 1,
              "id": 1,
              "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
              "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
            },
            {
              "userId": 1,
              "id": 2,
              "title": "qui est esse",
              "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
            }
          ]
        }
      }
    }
  </script>
</body>

正如你所看到的，输出中包含的React组件是纯HTML标签，而不是普通React应用程序的空主体。这就是为什么我们说Next.js适合SEO。
现在，Next.js使用脚本中的数据，将这些普通的HTML标签转换为React组件。这个过程称为hydration。

赞(0）回复(0）举报 2023-03-28

我来回答

javascript getStaticProps在页面上生成静态JSON数据，这对SEO友好吗？

1条答案

相关问题

热门标签

最新问答