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

SSR+SPA

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sigma Sigma
October 10, 2022
Programming
150
0

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022

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
96
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
92
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
91

Other Decks in Programming

See All in Programming
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
740
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
310
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
Avatar for Takuma Kajikawa kajitack
2
120
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
290
まかせられるPM・まかせられないPM / DevTech GUILD Meetup
Avatar for Yusuke Mukoyama yusukemukoyama
0
110
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
150
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
11k
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
270
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
170
How Swift's Type System Guides AI Agents
Avatar for Yuta Koshizawa koher
0
190
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
340

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
410
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
280
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
960

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