$30 off During Our Annual Pro Sale. View Details »

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
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
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
1.8k
手が足りない！兼業データエンジニアに必要だったアーキテクチャと立ち回り
Avatar for zinkosuke zinkosuke
0
250
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
2.8k
All(?) About Point Sets
Avatar for hole hole
0
240
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
24
20k
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
Avatar for dachi023 dachi023
1
330
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
10
10k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
27k
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
110
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
320
競馬で学ぶ機械学習の基本と実践 / Machine Learning with Horse Racing
Avatar for ShoheiMitani shoheimitani
14
14k
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
Avatar for Kazuki Hara harappa80
0
140

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Code Review Best Practice
Avatar for Trisha Gee trishagee
73
19k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k

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