タグ SSR
人気順 5 users 10 users 50 users 500 users 1000 usersssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもS... 続きを読む
Webの将来はサーバサイドレンダリング(SSR)に回帰していく。Denoが主張するIsomorphic JavaScript(もしくはUniversal JavaScript)とは何か?
Webの将来はサーバサイドレンダリング(SSR)に回帰していく。Denoが主張するIsomorphic JavaScript(もしくはUniversal JavaScript)とは何か? 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブ... 続きを読む
Deno で 学ぶ React のサーバサイドレンダリング - 30歳からのプログラミング
Deno で React のサーバサイドレンダリング(以下、SSR)を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーションまで行う。 また、React で SSR する方法を調べたところ、ほと... 続きを読む
サーバサイドレンダリングの導入から生じるSSRF|セキュリティブログ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング(SSR)の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング(SSR)とは? 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjsp... 続きを読む
Next.js 4年目の知見:SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー!っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”... 続きを読む
WASMとRustはVue.js/React.jsを打倒するのか? - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBa... 続きを読む
Next.js の状態管理 2020
Next.js といえば、SSG(JAMstack)が最近は特に花形ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が関心ごとの中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなく、getServerSidePropsを使用することが推奨されています。getStaticPropsやgetServerSidePropsを利用する... 続きを読む
SSR / SSGの理解を一段深ぼる: BFFアーキテクチャ
BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 この... 続きを読む
池田 泰延 / Yasunobu Ikeda on Twitter: "noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 Google
noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE 続きを読む
東京都の新型コロナ対策サイトはなぜNuxtJSだったのか? ─ シビックテックのベストプラクティス - エンジニアHub|若手Webエンジニアのキャリアを考える!
東京都が2020年3月3日深夜に公開した新型コロナウイルス感染症対策サイトは、都内の感染動向が見やすく整理されているだけでなく、NuxtJSベースのSSR(Server Side Rendering)で静的ホスティングにNetlifyを採用したサーバレスなSPA(Single Page Application)というモダンな技術選定がWebエンジニアの間で注目を集め... 続きを読む
SPA + SSR + PWA の作り方とセキュリティについて - 技術探し
一年前に以下の記事を書いて、その後放置していたら多くのライブラリのメジャーリリースで完全に動かなくなってしまったのでリニューアルしました。 blog.hiroppy.me 以下のセクションで説明していきますが、コードを読んだほうが早いです。 リポジトリ 技術スタック Server Side Rendering loadable-components データ... 続きを読む
ヤフーのフロントエンドと Node.js の関係性 - Yahoo! JAPAN Tech Blog
こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤(@koh110)です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR(Server Side Rendering)、BFF(Backends For Frontends)のチ... 続きを読む
【インフラ編】TECH LEADの技術を惜しげも無く公開します!React × PHP Laravel × BEAR.Sunday × SSR - TECH LEAD Blog
こんにちは、@TECH LEADです。 今回、「TECH LEADの技術を惜しげも無く公開します!」シリーズの最後となるインフラ編になります。 アーキテクチャー編 フロントエンド編 サーバーサイド(アプリケーション層)編 サーバーサイド(内部API層)編 インフラ編 ←いまここ 目次 目次 主な技術 インフラツール インフラ構築 ... 続きを読む
WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end | コリス
サーバーサイドのレンダリング(SSR)を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下... 続きを読む
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 ... 続きを読む
React のユーザーから見た今後のフロントエンドの予想 · GitHub
predict-frontend.md この記事は議論のたたき台で、ポジショントークや、偏見にまみれています。 今のフロントエンドの分類 古典的なサーバーサイド WAF への +α の味付け 大規模なクライアントアプリケーション管理のための SPA SEO / SSR を考慮した Node ヘヴィーな環境 他、提唱されてるパターン マイクロフロントエ... 続きを読む
業務で使える簡単なSSR + SPA のテンプレートを公開した - 技術探し
久しぶりのブログです。 よくNode.jsの人と思われがちですが、普段はNode.jsでのバックエンド開発はもちろんですがReactやVueを書いていますので、たまにはフロントエンドネタを投稿しようと思います。 主な技術スタック dependencies devDependencies 注意 Server Server Side Renderingを行う redux-sagaを使って非同... 続きを読む
AbemaTVはただのSSR じゃねぇんだよ - Speaker Deck
2018/07/06 Frontrend Vol.12 - サービスの誕生と成長 発表者: - SSRについて @kubosho - CDNについて @ktknest https://frontrend.connpass.com/event/90107/ 続きを読む
AbemaTVはただのSSR じゃねぇんだよ - Speaker Deck
2018/07/06 Frontrend Vol.12 - サービスの誕生と成長 発表者: - SSRについて @kubosho - CDNについて @ktknest https://frontrend.connpass.com/event/90107/ 続きを読む
2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発した際の知見 - Qiita
私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えば jQueryのUIプラグインを沢山使ってるサーバーフレームワーク で Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか?などの ノウハウについて 記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今... 続きを読む
Web サイト制作にこそ Nuxt.js がベストマッチである理由 - SCOUTER開発者ブログ
2018 - 03 - 19 Web サイト制作にこそ Nuxt.js がベストマッチである理由 Tweet 業務委託でSCOUTERのフロントエンド周りの開発をお手伝いしている、 potato4d です。 SCOUTER は、先日自社のコーポレートサイトを Nuxt.js + WP REST API 構成にてリニューアルいたしました。 普段であれば SPA や SSR が必要な高度なアプリケーシ... 続きを読む
BFF/SSRの話 // Speaker Deck
All slide content and descriptions are owned by their creators. 続きを読む
オタクが婚活したらSSRの彼氏が出てきた - Togetter
街コン、もっとちゃらちゃらしてて煌びやかなイメージあったけど、私みたいに意を決して来た普通の人が大半なのかなという感じでした 続きを読む
Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークである Nuxt.js とFirebaseを組み合わせて、SPA + SSRにAuthとRTDBを組み合わせた... 続きを読む
SPA + サーバーサイドレンダリング、そのダルさに関する私見 ::ハブろぐ
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング(SSR)が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい() 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ... 続きを読む