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

SSR+SPA

Avatar for Sigma Sigma
October 10, 2022
Programming
0
140

 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
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
91
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
82
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
79
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
69
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
89
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
88

Other Decks in Programming

See All in Programming
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
480
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
3
1.3k
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
250
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.6k
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
170
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
170
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
720
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
220
從冷知識到漏洞，你不懂的 Web，駭客懂 - Huli @ WebConf Taiwan 2025
Avatar for Huli aszx87410
2
3.4k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
460
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
39k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
140
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k
KATA
Avatar for Megan Lloyd mclloyd
PRO
33
15k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
430
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
890
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
51k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k

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