html js创建静态表格_如何在Jamstack时代使用下一个js创建静态站点-CSDN博客

html js创建静态表格

The JAMstack (JavaScript-API-Markup) movement makes us rethink how we build websites.

JAMstack(JavaScript-API-Markup)运动使我们重新思考如何构建网站。

The latest trend, and rightfully so, is to pre-render pages at build time instead of rendering them on the client or on the server (via Server Side Rendering), to achieve a blazing fast experience.

正确的做法是，最新趋势是在构建时预渲染页面，而不是在客户端或服务器上(通过服务器端渲染)渲染页面，以实现快速的体验。

什么是静态生成的网站？ (What can be a statically generated website?)

It is generally a good idea to pre-render a website/a page (i.e. use Static Site Generation) which does not have a lot of dynamic content that should be different for every user.

通常，预渲染一个网站/页面(即使用“静态网站生成”)是一个好主意，因为该网站/页面没有很多动态内容，每个用户的内容都不相同。

Dynamic content is meant by data that has to be fetched from an external API, such as third party service or database.

动态内容是指必须从外部API(例如第三方服务或数据库)中获取的数据。

A blog or a portfolio is a great example.

博客或投资组合是一个很好的例子。

Of course, a page which has absolutely no need for external data fetching is the perfect static page.

当然，绝对不需要外部数据获取的页面是理想的静态页面。

Whenever you add a blog post or add a new project to your portfolio, you trigger a re-build of your project and all the data is fresh. Still static, though, and served super fast via a Content Delivery Network.

每当您添加博客帖子或向项目组合添加新项目时，都会触发项目的重新生成，并且所有数据都是最新的。不过，它仍然是静态的，并且可以通过Content Delivery Network提供超快速的服务。

为什么选择Next.js？ (Why Next.js?)

As React is the current king in the front-end game, it is quite clear why we’d go with a technology that leverages it.

由于React是当前前端游戏中的王者，因此很清楚为什么我们会选择利用它的技术。

There are basically 2 big options when it comes to SSG (Static Site Generation) with React: Next.js or Gatsby.js.

对于使用React的SSG(静态站点生成)，基本上有2个大选择：Next.js或Gatsby.js。

Both are awesome technologies and pioneers in this field, however, I would personally stick with Next.js as it seems to be the technology which has a huge growth in popularity. It also integrates incredibly well with their parent platform, Vercel, thus deployments are just a click of distance away.

两者都是很棒的技术，并且都是该领域的先驱，但是，我个人还是会坚持使用Next.js，因为它似乎是一种普及程度很高的技术。它还与他们的父平台Vercel集成得非常好，因此部署只需几步之遥。

一个示例应用 (A sample App)

Let’s see how static site generation works in action.

让我们看看静态网站生成是如何工作的。

A sample Next.js project that we can look at is a blog, which serves as our proof of concept:

我们可以看的一个示例Next.js项目是一个博客，它是我们的概念证明：

The project is hosted on GitHub here.

该项目在GitHub上托管。

You can see that this is a really simple application with only one page. The important section is in the index.js page. Let’s take a look at the getStaticProps function:

您可以看到这是一个只有一页的非常简单的应用程序。重要部分在index.js页面中。让我们看一下getStaticProps函数：

This function is being run by Next when you build the project with the npm run build command and injects the props you return into the React component. Neat!

当您使用npm run build命令构建项目并将返回的props注入React组件时，Next将运行此功能。整齐！

If you run that command and take a look at the output, you shall see this:

如果运行该命令并查看输出，将看到以下内容：

The white dot means that our root path (/) which is basically our index.js from the pages folder is statically generated. That’s great! 🎉

白点表示静态生成了根目录( / )，它基本上是pages文件夹中的index.js 。那很棒！ 🎉

Now, if we start serving this build by running npm run start, a server will start-up which is great for local testing. Afterwards, let’s navigate to our local instance in the browser, and see what the main GET request returns:

现在，如果我们通过运行npm run start为该构建提供服务，则服务器将启动，这对于本地测试非常有用。然后，让我们在浏览器中导航到本地实例，并查看主要GET请求返回的内容：

This is static site generation in action! The initial request to the server returns our index page which is already pre-rendered with the blog data. No work needed on the client side.

这是实际的静态网站生成！对服务器的初始请求将返回我们的索引页，该索引页已预先呈现了博客数据。无需在客户端进行任何工作。

重建数据变更 (Re-building on Data Change)

Whenever you, let’s say, add a new blog post, you will need to re-build your Next.js project.

假设您每次添加一个新的博客文章，则都需要重新构建Next.js项目。

Modern Content Management Systems like Contentful and Netlify CMS integrate really well with the Next.js + Vercel ecosystem and this whole process can be automatic.

诸如Contentful和Netlify CMS之类的现代内容管理系统可以与Next.js + Vercel生态系统很好地集成在一起，并且整个过程可以是自动的。

使用静态网站生成的优势 (The Advantages of using Static Site Generation)

The following aspects are just a few strong points of using SSG:

以下方面只是使用SSG的一些优点：

Speed. Your static project can be hosted on any CDN which means that it’s served super fast to the clients.
速度。您的静态项目可以托管在任何CDN上，这意味着它可以超快地交付给客户端。
No need to pay for expensive servers for Server Side Rendering.
无需为服务器端渲染支付昂贵的服务器。
Resiliency and uptime. Hosting your app on a CDN means really little downtime. Also, given that you fetch the data only at build time means that the server you fetch data from can be down and your static site still alive and well, thank you very much.
弹性和正常运行时间。在CDN上托管您的应用程序意味着很少的停机时间。另外，由于您仅在构建时获取数据，这意味着从中获取数据的服务器可能已关闭，并且静态站点仍然正常运行，非常感谢。