静态网站vs动态网站：全面比较 – techsyncer

當很多人想到網站時，從來沒有考慮過靜態與動態網站的概念。畢竟，網站只是出現了，對吧？嚴格來說是的，但背後有很多事情正在發生。

對於計劃創建或遷移網站的人來說，了解這兩種類型的網站至關重要。您選擇的網站類型將影響開發人員如何管理和更新網站以及可能的運營和維護成本。

在本文中，您將了解靜態網站和動態網站之間的區別。您將看到開發人員如何創建靜態和動態網站，您的瀏覽器如何呈現它們以及許多其他有用的比較。

什麼是靜態和動態網站？

正如名字所示，靜態網站的元素是固定或硬編碼的。無論使用的瀏覽器是什麼，靜態網站的內容永遠不會改變。

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

大多數靜態網站的性質是信息性的。以個人博客為例，其目的是向讀者展示信息。在個人博客上，用戶通常只是瀏覽網站的內容。

相反地，動態網站超越了客戶端代碼的範疇。最終，動態網站基於HTML和CSS,，與靜態網站大致相同。但是，要使動態網站功能完整，它需要使用伺服器端語言，如PHP、ASP.net或JavaScript來動態生成HTML代碼。

動態網站使用術語CRUD,代表創建、讀取、更新、刪除。CRUD代表對數據庫進行的操作。如果你猜測動態網站使用數據庫，那你猜對了！

網站渲染差異

網絡服務器如何將靜態和動態網站交付給讀者的瀏覽器？

靜態網站精確地交付Web服務器上的代碼

記住，靜態網站包含硬編碼的HTML文件，可選的CSS和JS文件。你上傳到網絡服務器的任何代碼，都是精確地提供給瀏覽你網站的用戶的代碼。

舉例來說，下面是一個包含三個文件的示例靜態網站專案，使用Visual Studio Code開發。這個靜態網站的首頁只顯示一個標題和一個按鈕。

當你在這個簡單的網頁上點擊按鈕時，會顯示一個單詞。

Static Website Project in Visual Studio Code

下面是index.html文件的代碼。它作為靜態網站的首頁。

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

下面的代碼是style.css的代碼。這個CSS文件定義了首頁元素在瀏覽器中的樣式。

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

最後，下面的代碼是button.js的代碼，其中包含了當讀者點擊按鈕時，瀏覽器將觸發的JavaScript代碼。

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

假設靜態網站現在已經上線，下面的示例展示了它的外觀。如果你打開頁面的源代碼，你會看到頁面的代碼與index.html文件的源代碼完全相同。

注意：這個靜態網站示例是使用Visual Studio Code中的HTTP Server / HTML Preview擴展測試的。

從上面的演示可以看出，即使用戶通過點擊按鈕與頁面互動，底層代碼也不會改變。這是靜態網站的行為方式；瀏覽器處理一切。

動態網站先讀取數據庫

與靜態網站相反，動態網站使用服務器端處理生成代碼。這意味著頁面背後的底層代碼可能會隨著設計的不同而隨時更改。

例如，下面是一個只包含一個JavaScript文件的Node.js動態網站項目。

Dynamic Website Project in Visual Studio Code

以下是<dynamicsite.js的代碼。這段代碼是一個服務器端腳本，每次頁面加載時顯示當前的計算機時間。

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

下面的演示展示了動態網站的顯示方式。每次刷新頁面時，底層HTML代碼都會變化。

注意：此動態網站示例是使用Node.js測試的。

這就是動態網站在內部運作的基本示例。

靜態網站與動態網站：內容如何管理？

現在您知道靜態和動態網站是如何呈現和提供的。那麼如何添加、更新或刪除內容呢？假設您有一個靜態的個人博客網站，您如何添加新文章？如果您有一個動態的電子商務網站，您如何在目錄中添加新產品？

您所定义的网站类型将影响您管理网站内容的方式。以下是内容管理的典型选项。

硬编码静态页面

无论何时需要更新网站或其内容，几乎总是需要对代码进行更改。最基本且可能是最古老的方法是硬编码。这种方法涉及使用任何文本编辑器编辑网站的源代码。

这种方法可能是最繁琐和耗时的，因为必须手动编写网站的每个方面。但是，这也使得静态网站在设计上具有灵活性，因为每个页面都可以不同。

一些设计简单且功能简单的网站可以利用Markdown编写其内容。然后，将这些Markdown文档转换为HTML，从而产生可以上传到Web服务器的网页。

例如，下面的静态网站有三个页面：index.html、page1.html和page2.html。虽然这些文件是一个静态网站的一部分，但它们被编写成具有不同设计或主题的样式。

Example of a static website with different page themes

静态网站生成器

与手动编写代码不同，静态网站生成器提供了从头开始或使用样板模板创建整个静态网站的能力。新的文章或页面通常以Markdown编写，并在网站构建过程中生成HTML文件。

然后，可以将生成的文件上传到Web服务器，使网站上线。在一些静态网站生成器中，还可以使用其他格式（如纯HTML和JSON）编写内容。

以下是一些最受歡迎的靜態網站生成器的列表，您可以探索一下。

以下示例網站是使用Jekyll生成的，而不需要輸入任何一行代碼。

內容管理系統（CMS）

到目前為止，您可能已經聽說過WordPress。那麼Drupal、Joomla和Netlify呢？這些都是最受歡迎的內容管理系統或CMS的名稱。

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

動態網站通常與CMS相連。事實上，當您購買網頁寄存套餐時，已經包含了網站建構工具和可以在鼠標點擊（或幾次點擊）的情況下部署的CMS。CMS可能是動態網站成為受歡迎選擇的原因。

靜態網站也可以配置使用內容管理系統（CMS）。例如，Netlify與像Jekyll、Hugo和NextJS這樣的靜態網站生成器有整合支援。雖然與動態網站相比，設置CMS集成通常需要更多的工作。

何時使用靜態網站和動態網站

如果你想知道這個老問題的答案是什麼，“哪一個更好？”，你可以繼續等待。可能不會有一個明確的贏家。靜態網站和動態網站哪個更好，取決於你的需求。

選擇網站類型時需要考慮很多因素。以下只是一些要考慮的因素。

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

結論

如果你已經擁有一個網站，你可能已經知道你擁有靜態網站還是動態網站。如果不知道，那麼你應該在本文中學到如何區分這兩種類型。

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

如果你只是計劃建立一個新的網站，你的選擇將在很大程度上取決於它的目的。例如，電子商務和招聘網站可能更適合作為動態網站。而博客或作品集網站將會發現靜態網站足夠。

靜態網站是一切的起點，並且可能永遠不會消失。特別是現在靜態網站生成器越來越受歡迎。隨著進一步的發展，動態網站只會變得更好。

進一步閱讀

如果你對靜態網站和動態網站有興趣，請務必查看這些其他ATA文章。

如何使用Cloudflare支持的Azure静态网站