NUXT SSR 초급 입문 노트(소결)
CSR & SSR
웹 페이지 개발 은 이전의 jsp,php 에서 현재 의 3 대 프레임 워 크 인 angular react vue 로 바 뀌 었 습 니 다.사실은 csr 에서 ssr 로 바 뀌 었 습 니 다.즉,서버 렌 더 링 에서 클 라 이언 트 렌 더 링 으로 바 뀌 었 습 니 다.
사용 경험 이 있 는 것 은 대충 알 고 있 습 니 다.예 를 들 어 이전의 phop 개발 은 웹 페이지 내용 과 서버 코드 논 리 를 함께 쓴 것 입 니 다.클 라 이언 트 가 요청 할 때 서버 는 phop 엔진 의 렌 더 링 을 통 해 완전한 html 페이지 를 생 성하 여 클 라 이언 트 에 게 되 돌려 줍 니 다.이런 렌 더 링 된 페이지 는 브 라 우 저 에서 오른쪽 단 추 를 누 르 면 원본 코드 를 볼 수 있 습 니 다.페이지 의 모든 html 코드 를 볼 수 있 습 니 다.한편,클 라 이언 트 렌 더 링 은 vue 와 같 습 니 다.돌아 오 는 것 은 app 노드 에 걸 려 있 는 html 파일 과 js 파일 만 있 고 페이지 의 내용 은 모두 클 라 이언 트 의 js 렌 더 링 에서 생 성 되 었 습 니 다.그래서 html 텍스트 가 있 는 위 치 는 CSR(클 라 이언 트 렌 더 링)과 SSR(서버 렌 더 링)의 가장 본질 적 인 구분 입 니 다.
웹 개발 이 ssr 에서 csr 로 넘 어간 이상 우 리 는 왜 다시 ssr 를 하 는 것 입 니까?이것 은 쌍방의 장단 점 과 관련된다.
SSR：
장점:
SEO 에 편리 하고 완전한 html 를 렌 더 링 하 는 것 이 검색엔진 의 캡 처 에 더욱 유리 합 니 다.
페이지 에 불 러 오 는 흰색 화면 시간 이 짧 습 니 다(거의 없습니다).
단점:
페이지 를 불 러 올 때마다 서버 에 요청 을 해 야 합 니 다.서버 의 렌 더 링 부하 가 무 겁 고 요청 이 느 립 니 다.
불 러 올 때마다 페이지 를 새로 고 칩 니 다.페이지 의 작은 영역 만 바 꿔 야 하 더 라 도.
CSR：
장점:
페이지 는 우수한 성능 을 가지 고 페이지 의 상호작용 에 더욱 유리 하 다.
단점:
SEO 에 불리 하 다
첫 페이지 에서 흰색 화면 을 초기 화 하 는 데 시간 이 오래 걸 립 니 다.
우리 가 보편적으로 3 대 프레임 워 크 를 사용 하 는 오늘날,만약 우리 의 페이지 가 SEO 에 대한 좋 은 지원 이 필요 하 다 면,이것 은 우리 가 ssr 를 해 야 한다.NUXT 프로젝트 초기 화
다음 명령 을 사용 하여 비계 생 성 항목 을 호출 합 니 다.비계 옵션 은 필요 에 따라 선택 하면 됩 니 다.
npx create-nuxt-app < >
.nuxt
캐 시 디 렉 터 리 실행
assets
자원 디 렉 터 리,css 파일,js 파일,그림 저장 에 사용
components
vue 구성 요 소 를 저장 하 는 데 사용 되 는 구성 요소 디 렉 터 리
layouts
레이아웃 디 렉 터 리 는 레이아웃 을 설정 하 는 데 사 용 됩 니 다.파일 이름 은 레이아웃 이름 입 니 다.
페이지 디 렉 터 리 에 있 는 구성 요 소 는 layot 속성 을 통 해 레이아웃 구성 요 소 를 지정 할 수 있 으 며 기본 값 을 default 로 지정 하지 않 습 니 다.
레이아웃 구성 요소 에서
<nuxt />탭 을 사용 하여 레이아웃 을 지정 할 때 page 구성 요소 가 있 는 위 치 를 지정 합 니 다.middleware
미들웨어 디 렉 터 리 는 미들웨어 함 수 를 설정 하 는 데 사 용 됩 니 다.파일 이름 은 미들웨어 이름 입 니 다.
pages 디 렉 터 리 에 있 는 구성 요 소 는 middleware 속성 을 통 해 미들웨어 함 수 를 지정 할 수 있 습 니 다.미들웨어 는 구성 요소 가 렌 더 링 되 기 전에 실 행 됩 니 다.
pages
페이지 디 렉 터 리 는 경로 페이지 를 설정 하 는 데 사 용 됩 니 다.디 렉 터 리 에 있 는 vue 파일 은 해당 경로 설정 을 자동 으로 생 성 합 니 다.
다음 디 렉 터 리 구조 에 대응 하 는 설정:
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}<nuxt-link>대체<router-link>nuxt 는 page 구성 요소 에 추가 설정 항목 을 제공 합 니 다.다음 과 같이 자주 사용 합 니 다.플러그 인 디 렉 터 리,제3자 모듈 도입 에 사용,
element-ui.js:
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })
plugins: [
'@/plugins/element-ui'
],서버 디 렉 터 리
static
정적 파일 디 렉 터 리
store
vuex 디 렉 터 리,index.js 주 파일,다른 파일 은 기본적으로 module 모듈 로 설정 되 며,기본적으로 namespace 를 사용 합 니 다.
파일 형식:
export const state = () => ({
// state
})
export const actions = {
// actions
}
export const mutations = {
// mutations
}구체 적 으로 사용 하 다
만 든 항목 은 다음 과 같 습 니 다:
초기 항목 을 실행 합 니 다.효 과 는 다음 과 같 습 니 다.
레이아웃 사용
layouts 에서 새 파일 my Layout.vue
<template>
<div>
<header>
<h2>I am header</h2>
</header>
<main>
<nuxt />
</main>
<footer>
<h2>I am footer</h2>
</footer>
</div>
</template>
<template>
<div>
<h1>I am layout demo</h1>
</div>
</template>
<script>
export default {
layout: 'myLayout'
}
</script>
미들웨어 사용
예 를 들 어 우 리 는 로그 인하 지 않 고 점프 를 차단 하 는 미들웨어 를 실현 합 니 다.
middleware 에 auth.js 를 새로 만 듭 니 다.
export default function (ctx) {
// eslint-disable-next-line no-constant-condition
if (true) { // ctx
ctx.redirect({ path: '/' })
}
}middleware: 'auth'를 더 하면 이 페이지 를 방문 하면 홈 페이지 로 이동 하 는 것 을 차단 합 니 다.asyncData 로 ssr 구현
페이지 에 ssr1.vue 를 새로 만 듭 니 다.
<template>
<div>
<ul>
<li v-for="item of list1" :key="item">
{{ item }}
</li>
</ul>
<ul style="margin-top: 50px">
<li v-for="item of list2" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
layout: 'myLayout',
data () {
return {
list1: []
}
},
async created () {
const { status, data: { list } } = await this.$axios.get('/list')
if (status === 200) {
this.list = list
}
},
async asyncDate () {
const { status, data: { list } } = await this.$axios.get('/list')
if (status === 200) {
return {
list2: list
}
}
}
}
</script>그리고 서버 에 인 터 페 이 스 를 쓰 려 면 node 를 사용 해 야 합 니까?require 를 사용 해 야 합 니까?import 방식 을 사용 하려 면 babel-cli 와 babel-preset-env 를 설치 하고 새 프로필 을 만 들 수 있 습 니 다.babelrc:
{
"presets": ["env"]
}--exec babel-node를 붙 이 고 server 에 node 를 쓰 면 import 를 사용 할 수 있 습 니 다.그리고 koa-router 를 설치 하고 index.js 에 다음 코드 를 추가 합 니 다.
import Router from 'koa-router'
// start app.use
const router = new Router()
router.get('/list', (ctx) => {
ctx.body = {
list: ['a', 'b', 'c']
}
})
app.use(router.routes()).use(router.allowedMethods())
우 리 는 오른쪽 단 추 를 눌 러 원본 코드 를 봅 니 다.
list 2 는 asyncData 의 방식 으로 ssr 를 실현 했다.
nuxtServerInit 를 사용 하여 ssr 구현
새 페이지 ssr2.vue
<template>
<div>
<ul>
<li v-for="item of $store.state.list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
layout: 'myLayout'
}
</script>
export const state = () => ({
list: []
})
export const mutations = {
setList (state, value) {
state.list = value
}
}
export const actions = {
async nuxtServerInit ({ commit }, { app }) {
const { status, data: { list } } = await this.$axios.get('/list')
if (status === 200) {
commit('setList', list)
}
}
}
원본 코드 를 보고 정확하게 렌 더 링 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SSR 배포 전략 with EC2, CloudFront, pm2, NGINX (2)Ubuntu에서 기존의 http의 80번 포트로 리다이렉트할 수 있지만, 추가적으로 도메인을 등록하고 HTTPS 설정 등을 위해 NGINX를 사용해볼 것이다. 도메인을 등록하기 위해 AWS Route 53을 검색하고...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
