utterances-bot commented 2 years ago

Vue SSR 제대로 적용하기 (feat. Vanilla SSR)

SSR에 대한 개념을 알아보고, 이를 적용하기 위한 과정을 소개합니다.

https://zuminternet.github.io/vue-ssr/

elrion018 commented 2 years ago

실무에서 SSR를 더 쉽게 사용할 수 있게 되었습니다!

bigsaigon333 commented 2 years ago

Vanilla JS 로 SSR 만드신거 정말 감동입니다.. 정성스러운 글 너무 잘 읽었고 많은 인사이트 받고 갑니다. 감사합니다

dalcon10028 commented 2 years ago

아무생각 없이 nuxt를 사용했는데 ssr에 대해 자세하게 이해할 수 있게 되었습니다 감사합니다!

sjquant commented 2 years ago

좋은 글 잘 읽었습니다. 혹시 SSR을 하실 때 Nuxt를 이용하지 않으신건가요? Nuxt.js를 이용하지 않은 이유를 알 수 있을까요?

JunilHwang commented 2 years ago

@sjquant 일단 줌인터넷 프론트엔드의 경우 vue + nestjs 를 사용합니다. 그런데 nuxt를 사용할 경우 이를 같이 사용하기가 쉽지 않아서요! 그리고 SSR에 대한 정확한 이해가 있다면 굳이 SSR 때문에 nuxt를 사용할 필요는 없다고 생각합니다. 오히려 ssr이 아닌 다른 프레임워크적인 요소 때문에 쓸 수는 있다고 생각합니다!

chunwookJoo commented 2 years ago

이 하나의 글로 정말 많은 인사이트 얻고 갑니다... 대단하세요!! 준일님같은 프론트엔드 개발자가 되는게 목표입니다 ㅎㅎ 그리고 저는 수원공고를 나왔는데 깃헙 보니 삼일공고라고 되있어서 더 놀랐습니다..!😮

JunilHwang commented 2 years ago

@chunwookJoo 감사합니다 ㅎㅎ 저는 삼일공고에서 기능반 활동을 했었습니다. 그게 계기가 되어 이렇게 개발자의 길을 걷고 있네요! 천욱님도 저보다 훨씬 좋은 개발자가 되길 기대합니다 🙏

kispi commented 2 years ago

위에 Vanilla JS로 SSR 구현하는걸 쓰신 부분이 킬포네요 진짜 대단한 글입니다... 한명이라도 더 많은 사람이 이 글을 보면 좋겠네요 감사합니다

JunilHwang commented 2 years ago

@kispi 안녕하세요! 좋게 봐주셔서 감사합니다 ㅎㅎ

ubd2000 commented 2 years ago

많은걸 배우고 갑니다. 감사합니다. 좋은 개발자 시네요~

the-illarionov commented 2 years ago

Dayyyyyum boiii i crawled almost the whole internet searching for some tutorial on SSR starting from very basics vanilla approach. Your article is gold!

kispi commented 2 years ago

안녕하세요? 질문이 있습니다 현재 vue 3 composition api + @vue/server-renderer: ^3.2.26 으로 SSR을 구성해서 사용중인데,

const { renderToString } = require('@vue/server-renderer')

renderToString(app) <= 이 과정(SSR) 중에 발생하는 에러를 catch해서 ssr 서버로 알려줄 수 있는 방법이 있을까요?

이를테면, onServerPrefetch()안에서 실행하는 Promise에서 문제가 발생할 경우, 이 에러가 ssr 서버 콘솔에는 찍히는데(renderToString 내부에서 try catch를 해서 로그만 찍어주는 것 같습니다) 그걸 catch할 방법이 있는지 궁금합니다

찾아보니 예전 vue 2를 위한 vue-server-renderer 패키지에서는 renderToString(app, (err, callback) => {}) => 이런형태로 에러가 있을경우 그걸 실행하는 쪽에서 사용할 수 있는 방법이 있었던 것 같은데, deprecated된건지 vue 3에서는 어떻게 해야할지 막막하네요 ㅎㅎ

감사합니다

kispi commented 2 years ago

해결책이 있네요 ㅎㅎ

https://github.com/vuejs/core/commit/d668d48e9e5211a49ee53361ea5b4d67ba16e0a3

renderToString의 인자로 넘겨줄 app에 먼저 app.config.errorHandler 콜백을 설정하고, 여기서 에러를 잡아서 서버쪽에서 핸들링하면 되네요

macjjuni commented 2 years ago

SSR 작동 원리를 좀 더 자세히 알게됐습니다! 감사합니다 :)

sk8er123 commented 1 year ago

좋은 글 잘 봤습니다.

vuetify 를 쓰고 있는데

서버 가동한 다음 접속하면 아래 같은 에러나는데 혹시 해결책 아시나요??

listen to http://localhost:3000 /home/lyh/nodejs_project/linku2-vuejs/ssr/server/node_modules/vuetify/lib/directives/ripple/index.js:2 import "../../../src/directives/ripple/VRipple.sass"; // Utilities ^^^^^^

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1025:15) at Module._compile (node:internal/modules/cjs/loader:1059:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:816:12) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:93:18) at r (/home/lyh/nodejs_project/linku2-vuejs/ssr/server/node_modules/vue-server-renderer/build.dev.js:7948:24) at js/index.8f6adca8.js:1:24009

mostlytricks commented 1 year ago

Vue에서 opengraph 어떻게 생성해서 입혀줄까 계속고민하고있었는데.. 정말 많은 도움이되었습니다. 프레임워크 전환 해야하나 고민했는데 우선 라우팅 기능만 잘 고민해보고, store는 생각치 못한 부분이었는데 조심스럽게 접근해야겠네요. 감사합니다.

minhee0327 commented 1 year ago

meta 태그안에 og 정보를 동적으로 넣고싶을 경우에는 어떻게 해결하고 계시는지 궁금합니다 :) 예를들어 뉴스 정보를 공유할때, 각 url마다 뉴스의 제목,썸네일,내용이 다 다를텐데, /server/app.js 파일에서 위 정보들(url별 제목, 썸네일, 내용)을 읽은 후 template 안의 Meta 태그안에 og 정보를 동적으로 담는 방법이 어떻게 되는지 궁금합니다 (현 예제는 meta 정보가 변경되는 경우가 아닌 듯 해서 문의 드려봅니다!! 감사합니다!!)

kispi commented 1 year ago

페이지나 상황에 따라 동적으로 바뀌는 메타정보를 Vue 코드 내에서 자유롭게 store에 저장한다. store는 SSR, CSR 모든 컨텍스트에서 접근 가능하기 때문이다.(ex: Vuex 기준, store.state.metaTags: { [메타태그 ID]: { id, property, content } })
index.html 의 head 안에, 다른 곳에서 사용되지 않을 법한 유니크한 태그를 하나 정해서 넣는다.(ex: <meta-ssr></meta-ssr>)
SSR 컨텍스트 중 renderToString을 실행해서 생성된 string html로 서빙할 index.html의 내용을 바꾸는 과정이 있는데, 그 때 2의 태그를 1의 내용으로 만든 태그들로 replace해주는 작업도 수행해준다.

주의

당연하지만, 1의 작업(store populate)은 onMounted가 아닌 onServerPrefetch 훅에서 수행해야 SSR 컨텍스트에서 원하는 메타정보가 존재한다.

minhee0327 commented 1 year ago

@kispi 감사합니다!

jeigabi commented 11 months ago

제가 아직 다 이해를 못하긴 했지만, 어떤 환경의 백엔드에서건 데이터를 내려주면, 결국 Node 환경의 front-server이어야 하는것 같아보이는데.. 맞을까요?

chris-swatchon commented 11 months ago

제가 아직 다 이해를 못하긴 했지만, 어떤 환경의 백엔드에서건 데이터를 내려주면, 결국 Node 환경의 front-server이어야 하는것 같아보이는데.. 맞을까요?

네, 당연합니다. S3를 이용한 정적 호스팅 등 단순 SPA 환경으로는 구현이 불가능합니다.

zuminternet / zuminternet.github.io

Vue SSR 제대로 적용하기 (feat. Vanilla SSR) #39

Vue SSR 제대로 적용하기 (feat. Vanilla SSR)