sanbuphy
145 lines
2.8 KiB
Vue
145 lines
2.8 KiB
Vue
<!--
|
||
RenderingStrategyDemo.vue
|
||
CSR / SSR / SSG 对比演示
|
||
-->
|
||
<template>
|
||
<div class="render-demo">
|
||
<div class="header">
|
||
<div class="title">渲染策略：CSR / SSR / SSG</div>
|
||
<div class="subtitle">选择策略，观察首屏表现</div>
|
||
</div>
|
||
|
||
<div class="options">
|
||
<button
|
||
v-for="item in strategies"
|
||
:key="item.key"
|
||
class="option"
|
||
:class="{ active: current === item.key }"
|
||
@click="current = item.key"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<div class="card">
|
||
<div class="label">TTFB</div>
|
||
<div class="value">{{ metrics.ttfb }} ms</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="label">可交互时间</div>
|
||
<div class="value">{{ metrics.tti }} ms</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="label">SEO 友好</div>
|
||
<div class="value">{{ metrics.seo }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hint">{{ metrics.note }}</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
|
||
const strategies = [
|
||
{ key: 'csr', label: 'CSR' },
|
||
{ key: 'ssr', label: 'SSR' },
|
||
{ key: 'ssg', label: 'SSG' }
|
||
]
|
||
|
||
const current = ref('csr')
|
||
|
||
const metrics = computed(() => {
|
||
if (current.value === 'csr') {
|
||
return { ttfb: 450, tti: 1600, seo: '一般', note: 'JS 拉取完成后才渲染' }
|
||
}
|
||
if (current.value === 'ssr') {
|
||
return {
|
||
ttfb: 220,
|
||
tti: 1100,
|
||
seo: '好',
|
||
note: '首屏更快，但服务器压力更大'
|
||
}
|
||
}
|
||
return { ttfb: 120, tti: 700, seo: '很好', note: '静态预渲染，适合内容站点' }
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.render-demo {
|
||
border: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg-soft);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin: 1.5rem 0;
|
||
font-family: var(--vp-font-family-base);
|
||
}
|
||
|
||
.header {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.subtitle {
|
||
color: var(--vp-c-text-2);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.option {
|
||
border: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg);
|
||
padding: 0.35rem 0.8rem;
|
||
border-radius: 999px;
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.option.active {
|
||
border-color: #22c55e;
|
||
color: #15803d;
|
||
background: rgba(34, 197, 94, 0.12);
|
||
}
|
||
|
||
.cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.card {
|
||
border: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg);
|
||
border-radius: 10px;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.label {
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.value {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 0.8rem;
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
</style>
|