Nuxt.js服务器端渲染（SSR)
在Nuxt.js中，可以通过在页面组件中使用asyncData方法来实现服务器端渲染。asyncData在服务器端和客户端都会被调用，但它在服务器端渲染时会将数据预填充进组件中。
以下是一个简单的例子：
<template>
<div>
<h1>服务器端渲染的数据: {{ message }}</h1>
</div>
</template>
<script>
export default {
async asyncData({ params, error }) {
try {
const message = await fetch('https://api.example.com/data').then(res => res.json());
return { message };
} catch (e) {
error({ statusCode: 500, message: '服务器错误' });
}
}
};
</script>在这个例子中，当访问这个页面时，Nuxt.js会在服务器端调用asyncData方法，并将获取到的数据message预渲染到页面中。这样，用户在加载页面时会首先看到服务器送达的HTML，提升了应用的加载性能和SEO友好性。
评论已关闭