Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
90
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
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 1
Avatar for Philip Schwarz philipschwarz
PRO
0
120
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
4
1.8k
CSC305 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
120
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
130
AI時代もSEOを頑張っている話
Avatar for しらはま shirahama_x
0
210
しっかり学ぶ java.lang.*
Avatar for nagise nagise
1
470
Google Antigravity and Vibe Coding: Agentic Development Guide
Avatar for MIKIO KUBO mickey_kubo
2
120
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
1
200
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
2.8k
dnx で実行できるコマンド、作ってみました
Avatar for Tomohisa Takaoka tomohisa
0
130
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
160

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
450
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
119
20k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k

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