[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

98users がブックマーク コメント 16

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ

98 users dev.henry.jp

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント16件

  • 注目コメント
  • 新着コメント
asip
Viteの理解/知識の乏しいエンジニアの書いた記事、Viteと比較すべきはNext.jsではなくNext.js組込のWebpack。Vite、ではCSRのみが標準構成って、vite-plugin-ssr or vite-ssrを利用すればSSRできるんだよね(Next.js組込のTurbopackは現在ベータ)

その他
furu_ichi
社内でチェックせずに公開しちゃったのかな。『React単体のSPA構成からNext.jsのSSR構成に変えました』だったらわかるけど、ViteとNext.jsはそもそもジャンルが違う。

その他
door-s-dev
呼び方がおかしいから単純に理解してないと思われそう。 補足じゃなくて素直に「React + Vite構成をNext.jsに置き換えた話」と書いた方が良いのでは

その他
circled
コンパイラをフレームワークに書き換えましたって言われてる気分になってる

その他
asiamoth
おお! と思ってリンク先のHenryを見てみると、Next.js*ではなく*Nuxt製だった......(ドユコト?)。

その他
nilab
「弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供」「HenryのフロントエンドをReact + ViteからNext.jsに書き換え」「Next.jsへの切り替えによってもたらされたユーザー体験の向上について説明」

その他
yasu-log
便宜上「Vite」と呼称しても、技術レイヤーが違うので...

その他
Songmu
入社したてなのに、いきなりこれ推進して実現したのすごかった

その他
Nyoho
わしも比較している集合が違うかなあと思ったけど「Viteベースで作ったプロジェクトからNext.jsベースのそれに書き換えた」だったらいいかもと思った。

その他
kazokmr
検証内容がとても参考になる。今後はコンポーネント構成の話もあるのかな。ただSPA(CSR)からMPA(SSR)への切り替えなのでタイトルからミスリードが起こりそう。Nextjsと仕組みが似てるSvelteKitはVite使ってるし

その他
emmeleia
タイトルでミスリードを誘っているのはあるかもしれないけど、Vite+Reactくらいに直せばいいし、それを知識が乏しいと煽るのはいかがなものかと思う。

その他
t1000leaf
Vite と Next.js じゃ比較対象がおかしい?もしかして本番で vite preview してた?

その他
nilab
nilab 「弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供」「HenryのフロントエンドをReact + ViteからNext.jsに書き換え」「Next.jsへの切り替えによってもたらされたユーザー体験の向上について説明」

2023年06月03日 リンク

その他
asiamoth
asiamoth おお! と思ってリンク先のHenryを見てみると、Next.js*ではなく*Nuxt製だった......(ドユコト?)。

2023年06月03日 リンク

その他
dec123456789
4月入社ってことは多分新卒っしょ?まあこのレベルの理解でもしゃーないっしょ。......新卒だよね?

その他
ghostbass
よくわからんのだが、vite であることってそんなに実行パフォーマンスに影響するもの?

その他
eller
昔はClosureToolsってのがあってね...とか言いつつも、reflow/redrawを減らすという基本はまだ変わってないのかもと思った。スクリプト分割とかminifyのための情報整理とか、考えることが減らせてるようにも感じる

その他
Songmu
Songmu 入社したてなのに、いきなりこれ推進して実現したのすごかった

2023年06月02日 リンク

その他
JackP
タイトルからまたヘンテコな記事が出てきたなぁと思っちゃった。自戒を込めてだけど、技術用語をきちんと使おうという姿勢を持ちたい。エンジニアこそ国語力と表現力が必要だなと

その他
Nyoho
Nyoho わしも比較している集合が違うかなあと思ったけど「Viteベースで作ったプロジェクトからNext.jsベースのそれに書き換えた」だったらいいかもと思った。

2023年06月02日 リンク

その他
circled
circled コンパイラをフレームワークに書き換えましたって言われてる気分になってる

2023年06月02日 リンク

その他
yasu-log
yasu-log 便宜上「Vite」と呼称しても、技術レイヤーが違うので...

2023年06月02日 リンク

その他
door-s-dev
door-s-dev 呼び方がおかしいから単純に理解してないと思われそう。 補足じゃなくて素直に「React + Vite構成をNext.jsに置き換えた話」と書いた方が良いのでは

2023年06月02日 リンク

その他
kazokmr
kazokmr 検証内容がとても参考になる。今後はコンポーネント構成の話もあるのかな。ただSPA(CSR)からMPA(SSR)への切り替えなのでタイトルからミスリードが起こりそう。Nextjsと仕組みが似てるSvelteKitはVite使ってるし

2023年06月02日 リンク

その他
furu_ichi
furu_ichi 社内でチェックせずに公開しちゃったのかな。『React単体のSPA構成からNext.jsのSSR構成に変えました』だったらわかるけど、ViteとNext.jsはそもそもジャンルが違う。

2023年06月02日 リンク

その他
asip
asip Viteの理解/知識の乏しいエンジニアの書いた記事、Viteと比較すべきはNext.jsではなくNext.js組込のWebpack。Vite、ではCSRのみが標準構成って、vite-plugin-ssr or vite-ssrを利用すればSSRできるんだよね(Next.js組込のTurbopackは現在ベータ)

2023年06月02日 リンク

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「フロントエンドをV...」が注目されています。

気持ちをシェアしよう

ツイートする

フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ

こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型... こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足:工夫しているポイ

ブックマークしたユーザー

  • techtech05212024年06月10日 techtech0521
  • tadatakuho2023年07月05日 tadatakuho
  • thaturn2023年06月21日 thaturn
  • syque2023年06月12日 syque
  • carolina042023年06月09日 carolina04
  • hightree102023年06月09日 hightree10
  • len_prog2023年06月08日 len_prog
  • shunmatsu2023年06月07日 shunmatsu
  • cyber_snufkin2023年06月05日 cyber_snufkin
  • emmeleia2023年06月05日 emmeleia
  • yosuke_furukawa2023年06月05日 yosuke_furukawa
  • midas365452023年06月04日 midas36545
  • takaesu2023年06月04日 takaesu
  • dandelion2939492023年06月04日 dandelion293949
  • takutakuma2023年06月04日 takutakuma
  • tvtvtvtv2023年06月03日 tvtvtvtv
  • deejayroka2023年06月03日 deejayroka
  • Toge2023年06月03日 Toge
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /