HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

2024/10/20 71 users Shadow DOM HTML サーバーサイドレンダリング

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため... 続きを読む

【初学者向け】CSR / SSR / SSG / ISRとは？架空アプリでレンダリング手法の違いを理解しよう！ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/09/27 24 users ISR SSG クライ ラクス レンダリング

初めまして！新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます！ 🔖目次は以下の通りです🔖 はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レンダリングとは？ 動的にHTMLを生成するとは？ CSR（クライ... 続きを読む

Nuxt Auth Utils でサーバーサイドの認証を（OAuth・マジックリンク・ワンタイムパスワード）

2024/09/01 11 users サーバーサイド nitro OAuth Nuxt 認証

Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nu... 続きを読む

SSR増田だ。皆コメントありがとう。無事に承認欲求が満たされた。 一晩経っ..

2024/08/30 20 users 赤子 承認欲求 適性 一晩 課題

SSR増田だ。皆コメントありがとう。無事に承認欲求が満たされた。 一晩経って冷静になってみると、適性あってSSR引けたので余裕だったぞってことしか書いてないなって思ったので、いただいたコメント返しつつ、もう少し一般的な課題について自分なりの感想を書いてみたいと思う。 これは赤子もだけど、妻も夫も夫の会社... 続きを読む

いいよね！　西日本の美術館・博物館！　関西というくくりからは外れちゃ..

2024/06/28 406 users 関西 博物館 美術館 西日本 琵琶湖

いいよね！　西日本の美術館・博物館！　関西というくくりからは外れちゃうけど、ワイは以下が好き。 SSR：滋賀県立琵琶湖博物館（滋賀県草津市）琵琶湖の「生活の場」としての人文的側面と古代湖としての自然的側面を両方堪能させてくれる超贅沢な博物館。琵琶湖湖畔で営まれた長い年月にわたる人々の暮らしを堪能した... 続きを読む

【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み

2024/06/19 11 users 名目 図解 要約 tl;dr Next.js

「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでく... 続きを読む

PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉

2024/06/03 20 users PPR experimental SSG Stable 終焉

本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレ... 続きを読む

Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す

2024/05/18 13 users angular Firebase Next.js リポジトリ

先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これ... 続きを読む

ast-grep VSCode: 構造検索と置換の強力なツール

2024/03/03 95 users vscode 置換 マッチング 無視 正規表現

こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で... 続きを読む

ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."

2024/02/26 229 users Reactアプリ ssig33 最小限 astro Remix

最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもS... 続きを読む

Dockerを使わない、Remix / Next.js 14 など最新ウェブフレームワークのAWS完全サーバーレス構成と環境構築方法 | ブログ | Serverless Operations

2024/02/14 150 users Docker Remix SPA 主流 AWS Lambda

Remix / Next.js 14 など最新ウェブフレームワークをAWS Lambda にデプロイして、固定費のかからない完全サーバーレスな環境を構築する方法を紹介します。Dockerを使わなくてもできます。 SPA（Single Page Application）が主流だったフロントエンド開発トレンドがSSR（Server-side rendering）とエッジコンピューティン... 続きを読む

世界最速で Astro SSR を Amplify Hosting で動かしてみた - エムスリーテックブログ

2023/11/22 14 users アーキテクト エムスリーテックブログ AWS 園田 世界最速

こんにちは。エムスリーエンジニアリンググループのコンシューマチームでアーキテクトをしている園田です。 本日はコンシューマチームのブログリレー 1 日目です。 2023/11/20 (日本時間だと本日) に AWS の Amplify Hosting で Next.js/Nuxt.js 以外の SSR サポートが発表されました。 aws.amazon.com aws.amazon.com ... 続きを読む

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA

2023/07/06 7 users エッジサーバー CDN CloudFlare vite 悲願

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実... 続きを読む

SSRみたいなフロント用語の使い方改めませんか運動

2023/05/28 8 users ペンタ コンポーネント 運動 界隈 側面

sumirenです。 背景 フロントエンド界隈はベンダやコミュニティ主導で新しいアーキテクチャや技術的手法がどんどん出ていて素晴らしいです。 一方、そうして量産されてきた用語が、界隈の変化に置いていかれている側面もあるように思います。例えば、SSRという用語を取り上げると、コンポーネントからHTMLへの変換を指す... 続きを読む

Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？

2023/02/06 279 users deno サーバサイドレンダリング CGI インタラクティブ

Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブ... 続きを読む

Blazorの生みの親が「Blazor United」発表。SPAとSSRを1つのBlazorに統合し、共通のソースコードで記述可能に

2023/02/05 5 users WebAssembly Blazor 生みの親 共通 実装

Blazorの生みの親が「Blazor United」発表。SPAとSSRを1つのBlazorに統合し、共通のソースコードで記述可能に C#などの.NETテクノロジーを用いてWebアプリケーションの開発を可能にするフレームワークとして登場したのがマイクロソフトの「Blazor」です。 最初はWebAssemblyを用いてWebブラウザ上に.NETランタイムを実装... 続きを読む

東亜あじこ@Vtuber on Twitter: "img2imgが面白くて これ、呪文も丁度良かったんだけど SSR引いた気分 サムネだと一緒なの本当にすき #NovelAIDiffusion #novelAI https://t.co/yCxoQgzmgK"

2022/10/05 38 users novelAI サムネ 呪文 img2img https

img2imgが面白くて これ、呪文も丁度良かったんだけど SSR引いた気分 サムネだと一緒なの本当にすき #NovelAIDiffusion #novelAI https://t.co/yCxoQgzmgK 続きを読む

76. モダンウェブフロントエンド(2022)に至る歴史 - React Server Component、SSR Streaming w/ morishin127 | fukabori.fm

2022/07/10 18 users SPA ＣＳＲ fukabori.fm エピソード 出演者

MP3ファイルをダウンロード 内容紹介 2022年のモダンウェブフロントエンドまでに至る歴史、SPA、CSR、SSR、SSR Streaming、React Server Component などについて語っていただいたエピソードです。 出演者 2022年のモダンウェブフロントエンドまでに至る歴史、SPA、CSR、SSR、SSR Streaming、React Server Component など... 続きを読む

モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ

2022/06/21 29 users クックパッド開発者ブログ ISR SSG React ＣＳＲ

こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発... 続きを読む

Cloudflare WorkersはSSRだけではありませーん！ - ゆーすけべー日記

2022/06/20 8 users Cloudflare Workers ゆーすけべー日記

Cloudflare Workersが話題になって「CDNのエッジでSSRできるのすごくない？」ってなりがちです。 たしかにものすごいのですが、Cloudflare WorkersはSSRをするためだけのものではありません。 SSGしたページに機能を追加したり、CDNのバックエンドのRequest/Responseのハンドリングに使えます。 今回はCloudflare Pages... 続きを読む

Remixの凄みを紹介したい

2022/05/26 83 users Remix Transcript ISR Prisma ＣＳＲ

Transcript 📀 Remix の凄みを紹介したい @aiji42_dev Who am I ? Uejima Aiji | Twitter: @aiji42_dev 🏢 株式会社エイチームライフデザイン 🧘 リードエンジニア 🥑 最近の活動 CloudflareでISRを実現したり CSRなサイトをPrerenderでSSRぽくしたり PrismaからSupabase APIを叩くミドルウェア作っ たり 社内でフロント... 続きを読む

話題騒然！に全然なっていない Java x TypeScript な Web フレームワーク "Hilla" の紹介

2022/05/03 14 users TypeScript BFF フレームワーク exit web

あまり話題になっていない Web フレームワーク "Hilla"[1] を紹介したいと思います（もう少し話題になってほしい）。 BFF を Java で作りたい、または作らざるを得ない人向けなので該当しない方は、ここで exit です。Hilla は、SSR とかないので SEO が不要なシステムが対象になるかと思います。 Hilla の最大の特徴は... 続きを読む

Cloudflare WorkersでSSRができると何が嬉しいか

2021/11/24 27 users Cloudflare Workers React 対抗馬

Next.jsの対抗馬となりそうなReactのフレームワークでRemixのv1.0がリリースされました。 個人的にRemixでいちばん魅力を感じているのはCloudflare WorkersでSSRができるという点です（現状ではNext.jsをCloudflare Workers上でSSRするのは難しい）。これがなぜ嬉しいのかと言うと、パフォーマンスを出しつつ、低コスト... 続きを読む

Next.jsでSSRを限界まで簡単に実現する

2021/09/24 13 users getInitialProps Next.js 限界 終焉

１．getInitialPropsの終焉 1.1. Next.jsではgetInitialPropsのSSRが終わったことにされている Next.jsの9.3以降、getStaticPropsやgetServerSidePropsが登場し、現在ではgetInitialPropsを使ったSSRが終焉を迎えたかのような風潮となっています。しかしgetStaticPropsとgetServerSidePropsは、実際の所で大きな欠点を抱... 続きを読む

CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO

2021/07/25 10 users OGP DevelopersIO Lambda@Edge

吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAg... 続きを読む