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

SSR+SPA

Avatar for Sigma Sigma
October 10, 2022
Programming
0
150

 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
210
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
140
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
95
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
84
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
82
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
71
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
91
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
91

Other Decks in Programming

See All in Programming
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
660
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
8.2k
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
480
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
930
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
400
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
250
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
180
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
1k
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
470
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
0
330
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
120

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
120
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
200
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k

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……