Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SSR+SPA

Avatar for Sigma Sigma
October 10, 2022
Programming
0
130

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022
Tweet

More Decks by Sigma

See All by Sigma
Proxmox_VE.pdf
Avatar for Sigma seiyasugimoto
0
200
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
130
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
100
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
89
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
80
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
78
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
66
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
87
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
85

Other Decks in Programming

See All in Programming
Bakuraku E2E Scenario Test System Architecture #bakuraku_qa_study
Avatar for teyamagu teyamagu
PRO
0
560
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
0
330
マイベストのシンプルなデータ基盤の話 - Googleスイートとのつき合い方 / mybest-simple-data-architecture-google-nized
Avatar for snhryt snhryt
0
140
ボトムアップの生成AI活用を推進する社内AIエージェント開発
Avatar for aku11i aku11i
0
1.5k
iOSでSVG画像を扱う
Avatar for Kishikawa Katsumi kishikawakatsumi
0
190
エンジニアに事業やプロダクトを理解してもらうためにやってること
Avatar for bayashi murabayashi
0
140
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
5.6k
Vue 3.6 時代のリアクティビティ最前線 〜Vapor/alien-signals の実践とパフォーマンス最適化〜
Avatar for Shingo Hiranuma hiranuma
2
410
Nitro v3
Avatar for kazupon kazupon
2
220
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
2
770
Module Proxyのマニアックな話 / Niche Topics in Module Proxy
Avatar for kuro kuro_kurorrr
0
2.6k
Amazon Bedrock Knowledge Bases Hands-on
Avatar for Kono konny0311
0
130

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
310
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
116
20k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

Transcript

  1. SSR+SPA Nuxt+Vuex

  2. SSR(+SPA) とは • SSR とは ◦ サーバーサイドレンダリングの略。 クライアントサイド（SPA）と サーバーサイ ドの

    HTMLレンダリングを 併用しユーザー体験を向 上させることを指す。

  3. 冷静に考えるととんでもないことをやってる • サービス内の別のページからリンクすると クライアントサイドで レンダリングされる。 • そのページをF5を押して再読み込みすると サーバーサイドでレ ンダリングされる …

    は？

  4. なんでそんなクソ面倒くさいことを？ • サーバーサイドでレンダリングするならテンプレートエンジンを使った昔ながらの 方法でやれば良いじゃない。 • SPAが必要なほど複雑なフロントエンドで、OGPのクローラの面倒を見たりSNS でシェアされた際のファーストビューの速さが問題になる要件そうそう無いで しょ。 つい先日あった

  5. Nuxtで対応 • NuxtにはSSRサポートがある これで勝つる わけなかった

  6. 案件当時の標準的なNuxtプロジェクト • Nuxt + TypeScript を実現するために外部ライブラリを使う ◦ nuxt-property-decorator ( vue-property-decorator

    ) ◦ vuex-module-decorator • vuex-module-decorator の issue にとんでもないコメントを見つけてしまう。 ◦ https://github.com/championswimmer/vuex-module-decorators/issues/146#issuecomm ent-515269904

  7. SSRのバグのソリューションを探った 結果、getModule() に根深い問題が ありそう。 このリポジトリは大規 模なオーバーホール 無しではSSRでは使 えない。

  8. 終わった……

  9. None

  10. Readmeに書いてある おまじないの意味を知る

  11. exportしてるpluginsがキモ getModule()しているのがポイント

  12. I GOT KOTONAKI……