なぜ私のブログはBlazorに戻るのか?

なぜ私のブログはBlazorに戻るのか?

ブログサイトの開発は苦労し、MVC、Vue、Goなどの10近くのバージョンを試してきましたが、Blazorに戻り、静的SSRを使用して、速度が急上昇し、正常にオンラインになりました。

最后更新 2024/11/06 23:19
沙漠尽头的狼
预计阅读 5 分钟
分类
Blazor
标签
.NET C# Blazor Go Vue

はじめに

在博客网站的开发征程中,站长可谓是一路披荆斩棘。从最初的构思到实践,先后涉足了多种开发技术,包括 MVCRazor PagesVueGoBlazor 等。在这漫长的过程中,网站版本更迭近 10 次,每一个版本都凝聚着站长的心血与探索,这段充满挑战的历程详细记录于 分享我做 Dotnet9 博客网站时积累的一些资料 - 码坊

今日、熟考と実践的なテストの後、ブログサイトは再びBlazorに戻り、静的SSRテクノロジーを採用し、スタイリッシュで実用的なAnt Designデザインスタイルを取り入れています。この一連の改善により、ウェブサイトへのアクセス速度は質的に飛躍し、ウェブサイトに新たな活力を注入するように、現在のウェブサイトは正常にオンラインになっています。

  • Webサイトhttps//dotnet9.com

ソースの力

以下のオープンソースプロジェクトに感謝します:

これは、Blazorテクノロジーに基づいて構築されたオープンソースのエンタープライズ開発フレームワークです。ローコード、クロスプラットフォーム、すぐに使える優れた機能により、従来の開発の限界を打ち破り、1つのコード、複数の場所で実行する効率的なモデルを真に実現します。そのコアバリューは、効率性と柔軟性であり、ソフトウェア開発モデルに新たな変化をもたらします。魔法の鍵のように、開発者がデジタルトランスフォーメーションの扉を簡単に開き、さまざまな課題に冷静に対応し、ビジネスの繁栄を実現し、新しい章を開くのを助けます。

ソースコードもソースです:

  • リポジトリhttps//github.com/dotnet9/CodeWF

Code Factoryは. NET 9 Blazorを使用して開発されたウェブサイトで、技術記事、オープンソースプロジェクトの紹介、Code Factoryを使用するオンラインツールがあります。

ウェブサイト技術者

网站是基于 Known 的开源项目 KnownCMS 搭建:

Known CMSはBlazorをベースにしたコンテンツ管理システムで、フロントエンドではBlazor静的コンポーネント、バックエンドではKnownフレームワークを使用しています。

因为站长的网站只是一个博客文章展示、在线工具使用,平时文章编辑也是使用 Typora 及 VS Code 搭配使用,网站核心数据文件存储于 Assets.Dotnet9 仓库,所以站长去除了暂时不使用的后台管理相关功能,项目源码只有 3 个工程:

  • AntBlazor:ウェブマスターは基本的にプロジェクトを変更しておらず、フォーム、タブ、ボタンなどの基本コンポーネントなど、Knownが提供するAnt DesignスタイルのBlazor静的コンポーネントパッケージです。
  • Code WF:Razorクラスライブラリは、主にウェブサイトのドキュメント、ブログページのカプセル化を実現し、現在のツールはオンラインではなく、このライブラリアーキテクチャによると、別のライブラリがオンラインツールを書くために開きます。
  • WebSite:Code WFとAntBlazorプロジェクトを統合したウェブサイトのエントリプロジェクトで、もちろんページカプセル化(ホームページ、About、タイムラインなど)、Web APIコントローラなども含まれます。
AntBlazor CodeWF WebSite
AntBlazor CodeWF WebSite

** 簡単な質問:静的SSRとは何ですか?*

静态 SSR 与 Blazor Server 或 Blazor Client(WASM)有着显著的区别,微软文档 的说明:

静的SSRは、サーバが着信HTTP要求を処理する間に、コンポーネントがサーバ側で実行されるユニークな動作モードです。このプロセスでは、BlazorはコンポーネントをHTMLに巧みにレンダリングし、レスポンスコンテンツに含めます。レスポンスが送信されると、サーバーサイドのコンポーネントと対応するレンダラー状態は自動的に破棄され、最終的には純粋なHTMLのみがブラウザ側に残ります。

このモデルの利点は多岐にわたります。まず、ホスティングコストを大幅に削減し、ウェブサイト運営者の経済的負担を軽減します。第二に、小規模なユーザーアクセスでも大規模なトラフィックの衝撃でも、優れたスケーラビリティを備えています。これは、コンポーネントの状態を維持するために継続的なサーバリソースを必要とせず、大幅なサーバリソースを節約できるためです。さらに、ブラウザとサーバー間の継続的な接続の制約から解放され、Web Assemblyをブラウザにロードする必要がなくなり、パフォーマンスがさらに最適化されます。

よりわかりやすい観点から見ると、静的SSRはBlazor Serverと同じサーバーサイドレンダリングのカテゴリーに属しますが、インタラクティブ性の点では異なります。静的SSRモードでは、フロントエンドのHTMLコントロールはBlazor ServerのようにC#イベントメソッドを使用してマッピングされませんが、JS関数を使用してインタラクションすることができます。例えば、ボタンのクリックイベントはJS関数でマッピングされます。ありがたいことに、C#エンティティバインディングやサービスインジェクションなどの重要な機能は、静的SSRでも正常に使用できます。この機能により、静的SSRはSEO(検索エンジン最適化、すなわち、一連の技術的手段を通じて検索エンジンでのウェブサイトのランキングを向上させ、ウェブサイトのトラフィックを増加させる必要があります。コアは、ウェブサイトのコンテンツが検索エンジンによって効果的にクロールされ、より多くのトラフィックを得ることができるようにすることです。静的SSRコンポーネントの定義を次に示します(記事の詳細プロフィールコンポーネントUPostCount.raozr)。

@inject IOptions<SiteOption>
  SiteOption
  <div class="counts">
    @if (Post?.Lastmod != null) {
    <span>更新于@(Post?.Lastmod?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
    } else {
    <span>创建于@(Post?.Date?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
    }
    <span style="margin:0 5px;">|</span>
    <span class="author"
      >@(string.IsNullOrWhiteSpace(Post?.Author) ? SiteOption.Value.Owner :
      Post!.Author)</span
    >
    @if (ShowEdit) {
    <span style="margin:0 5px;">|</span>
    <a
      href="@ConstantUtil.GetPostGitHubPath(SiteOption.Value.RemoteAssetsRepository, Post)"
      target="_blank"
      >我要编辑、留言</a
    >
    }
  </div>

  @code { [Parameter] public BlogPost Post { get; set; } [Parameter] public bool
  ShowEdit { get; set; } = true; }</SiteOption
>

効果は以下のとおり。

サイト機能の説明

トップページ>

  • Webサイトhttps//dotnet9.com

ほとんどのウェブサイトと同様に、“コードショップ:. NET 9 Web API + Blazorを使用した開発”を示します。技術記事、オープンソースプロジェクトの紹介、効果的なプログラミングを支援するオンラインツールがあります。次に、特集記事ブロック、特集ツールブロック(開発中)、最後にリンク、ページ末尾などが表示されます。

ファイルのアーカイブ

オープンソースプロジェクトの一部を紹介します。

  • Webサイトhttps//dotnet9.com/project

以下はプロジェクトの概要です。

  1. CodeWF

这是本站的源码仓库,可点击链接查看。

  1. CodeWF.EventBus

它适用于进程内事件传递(无其他外部依赖),功能与 MediatR 类似,可点击链接查看。

  1. CodeWF.EventBus.Socket

CodeWF.EventBus.Socket 是一个轻量级、基于 Socket 的分布式事件总线系统,旨在简化分布式架构中的事件通信。它允许进程之间通过发布 / 订阅模式进行通信,无需依赖外部消息队列服务。可点击链接查看。

  1. CodeWF.NetWeaver

CodeWF.NetWeaver 是一个简洁而强大的 C#库,支持 AOT,用于处理 TCP 和 UDP 数据包的组包和解包操作。可点击链接查看。

  1. CodeWF.Toolbox

CodeWF Toolbox 使用 Avalonia 开发的跨平台工具箱,使用了 Prism 作为模块化开发框架,支持 AOT 发布,可作为 Avalonia 项目学习。可点击链接查看。

  1. CodeWF.Tools

这里收集、分享了常用工具类,可点击链接查看。

  1. Assets.Dotnet9

这是本站的核心数据仓库,可点击链接查看。

ブログ>>

  • Webサイトhttps//dotnet9.com/post

ブログページは、左、中央、右の3つの列に分かれた標準的なテクノロジーブログスタイルです。左側の列は記事の分類リストで、クリックすると記事のリストの中央ページを閲覧でき、右側はウェブサイトの統計、ウェブマスターの推薦などです。

点击列表中的文章可浏览文章详细内容,在此要感谢 VleaStwo (Lee) 大佬提供的 TOC 功能:这个功能使用户能够快速定位文章的重点内容,提高阅读效率。

** すべての記事を修正できます **

記事にタイプミス、誤植、誤解を招く場所がある場合、または何か追加がある場合は、ページの右上隅にある“編集したい、メッセージを残したい”をクリックしてPRしてください。

最新一个对文章 . NET 跨平台客户端框架 - Avalonia UIPR#4

感谢网友 hjkl950217 (长空 X)

まとめまとめまとめ

ウェブサイトの開発プロセスでは、ウェブマスターは常に探求し、多くのチュートリアルやオープンソースプロジェクトを学び、非常に有用で、助けてくれた友人や教師に感謝しています。

另外,VleaStwo大佬开了一个 Masa Blazor 分支,欢迎有兴趣的朋友前来 PR 或交流:

最後に、関連リンクを貼り付け、理解し、共有することができます:

  • 本サイトソースAnt Design Style https//github.com/dotnet9/codewf
  • VleaStwo大佬分支(Masa Blazor 风格):https://github.com/VleaStwo/CodeWF
  • Known:https://known.org.cn
  • Ant Design Blazor:https://antblazor.com/
  • Masa Blazor:https://masastack.com/blazor
Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2024/02/29

Winformでもデータを表示できます。

winform開発の過程では、しばしばデータ表示機能を行う必要がありますが、以前はグリッドコントロールを使用していましたが、今日は例を通じて、Winform Blazorハイブリッドでant Design Blazorテーブルコンポーネントを使用してデータ表示を行う方法を紹介します。

继续阅读
同分类 / 同标签 2024/02/29

Winformのインターフェースも良く見えますか?

先日、winformでBlazorハイブリッドを使用することを紹介しましたが、Blazor UIを使用するとwinformプログラムがより良く見えるようになると述べました。次に、winform Blazorハイブリッドで描画する例を示したいと思います。

继续阅读