php可以抓取网页数据吗(浏览器访问网站典型的流程是怎么样的？(一))

　　php可以抓取网页数据吗(浏览器访问网站典型的流程是怎么样的？(一))

　　浏览器访问网站的典型流程是浏览器先获取一个HTML页面，这个页面没有数据，然后useEffect函数调用fetch从服务器获取数据，然后使用数据设置组件state，因为状态发生变化，react使得组件函数重新执行，页面重新渲染，所以页面实际上有两个渲染周期。

　　SEO（搜索引擎优化）是基于第一个渲染周期的页面，这个页面的数据是空的。为了避免这个问题，可以将预渲染页面收录在数据库的第一个渲染周期中。从获得的数据。

　　为了使预渲染页面收录数据，NextJS 提供了两种预渲染形式：

　　静态站点生成 静态生成 SSG 服务器端渲染 服务器端渲染 SSR

　　SSR 在构建过程中使用 getStaticProps 函数生成带有数据的页面，示例代码：

　　import MeetupList from "./../components/meetups/MeetupList";

const DUMMY_MEETUPS = [

{

id: "m1",

title: "A First Meetup",

image:

"https://www.safari254.com/wp-content/uploads/2014/08/3-unmissable-experiences-Nairobi_KICC-sunset.jpg",

address: "Somewhere, 12345",

description: "The sunset of an African city",

},

];

function HomePage(props) {

return ;

}

export async function getStaticProps() {

// 此函数中可以写各种服务端代码：连数据库，访问文件系统.....

// 这里的 DUMMY_MEETUPS 一般是从服务端获取的数据

return {

props: {

meetups: DUMMY_MEETUPS,

},

revalidate: 123,

};

}

export default HomePage;

　　getStaticProps 只能在页面组件中使用。getStaticProps 函数的名称是固定的，它必须返回一个对象。该对象必须收录用于组件渲染的 props 属性。getStaticProps 可以是异步的，并且可以返回一个 Promise。getStaticProps 可以访问文件系统并连接到数据库。这个函数里写的代码在构建阶段就已经执行过了，不会到达客户端，也不会在服务端执行，尤其是客户端不会执行。所以代码永远不会到达访问者的机器。

　　使用静态生成意味着，在部署之后，预渲染的页面不会改变，至少默认情况下不会改变。如果数据已更改，则需要对其进行重建和重新部署。如果您不这样做，页面数据将过期。为了解决这个问题，在getStaticProps返回的对象中设置revalidate属性，值是时间，单位是秒。使用 revalidate 属性，可以应用称为增量静态生成的功能，然后服务器将在每个设置的时间间隔后重新生成页面。时间可以根据页面数据的实际更新速度来设置。例如通过设置revalidate:123，可以保证页面不会过时超过123秒。